Her bir nesnenin/metnin aynı kapsayıcı içindeki farklı kaplar içinde nasıl otomatik olarak ortalanır?

Question

Aynı sayfada farklı kapların içinde dikey ve yatay olarak her şeyi otomatik olarak ortalamanın bir yolu var mı? En iyi% 50 ve dikey olarak hizalamayı denedim, ama işe yaramadı. Dikey olarak otomatik olarak ortalamak istiyorum çünkü eğer nesne/metin boyutu değişirse, tam olarak doğru yeri ortalayacaktır. Yatay olarak başarılı olacağım ve üstte kullanmak istemiyorum: px; Bunu html5 ve css kullanarak nasıl yapabilirim? no center

Answer 1

vertical-align

center everything automatically sadece birbirlerine göre içi elemanları hizalanacaktır. İstediğiniz şekilde çalışmayacak.

Görüntünüzde gördüğünüz gibi dikey hizalamak için, yararlı bulabileceğiniz ek css özelliklerine sahip display: flex;'u kullanmanız gerekir.

Answer 2

temelde dikey hizalama için

position: absolute; 
top: 50%; 
transform: translate(-50%); 

kullanabilirsiniz.

Ama

bunun işe yaraması için, çevredeki elemanlar ya sabit bir yüksekliğe sahip zorunda, yoksa bir yüzde yüksekliği body elemana kadar da onların ebeveyn elemanları ve bu çevresindeki tüm unsurları tüm yol varsa gerek yüzde yüksekliklere sahip.

Answer 3

DIV'lerin tablo özelliklerini tanımlayan alternatif bir çözüm. Bir tablo hücresinde içerik sadece yatay olarak değil, dikey olarak da (sınıfta .x) ortalanabilir.

Codepen: http://codepen.io/anon/pen/WwjQZw

HTML:

<div class="wrap"> 
    <div class="row_wrap"> 
    <div class="head x"> 
     ONE 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="middle x"> 
     TWO TWO 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="bottom x"> 
     THREE 
    </div> 
    </div> 
</div> 

CSS: bununla

body { 
    font-size: 36px; 
    color: green; 
} 

.wrap { 
    display: table; 
    width: 100%; 
} 

.row_wrap { 
    display: table-row; 
} 

.x { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.head { 
    height: 200px; 
    background: #fa4; 
} 

.middle { 
    height: 400px; 
    background: #4af; 
} 

.bottom { 
    height: 100px; 
    background: #a4f; 
}