div dikey hizalama orta css

Question

Ben dikey abc div sadece div ortasına hizalamak benim metni almaya çalışıyorum.

div ortasında dikey hizalamak için 50px ve metne yüksekliğini tutmak istiyorum.

Ben belki doğru şeyler aramaya değilim, bu soruna bir çözüm bulmak için henüz ettik.

body{ 
 
    padding: 0; 
 
    margin: 0; 
 
    margin: 0px auto; 
 
} 
 

 
#main{ 
 
    position: relative; 
 
    background-color:blue; 
 
    width:500px; 
 
    height:500px; 
 
} 
 

 
#abc{ 
 
    font:Verdana, Geneva, sans-serif; 
 
    font-size:18px; 
 
    text-align:left; 
 
    background-color:#0F0; 
 
    height:50px; 
 
    vertical-align:middle; 
 
}

<div id="main"> 
 
<div id="abc"> 
 
    asdfasdfafasdfasdf 
 
</div> 
 
</div>

Answer 1

Sen line-height: 50px; kullanabilirsiniz, orada vertical-align: middle; gerek kalmayacaktır.

Demo

---

Eğer span kullanarak metni kaydırma ve daha da unutmayın, vertical-align: middle; birlikte display: table-cell; ve display: table; kullanabilirsiniz bu durumda böylece, birden fazla satır var ise yukarıdaki başarısız olur #abc

Demo

#abc{ 
    font:Verdana, Geneva, sans-serif; 
    font-size:18px; 
    text-align:left; 
    background-color:#0F0; 
    height:50px; 
    display: table; 
    width: 100%; 
} 

#abc span { 
    vertical-align:middle; 
    display: table-cell; 
} 

için width: 100%; kullanmak

---

Burada düşünebileceğim başka bir çözüm de transform özelliğini translateY() ile Y açıkça Y Ekseni anlamına gelir. Bir başka ... yalındır negatif -50%

div { 
    height: 100px; 
    width: 100px; 
    background-color: tomato; 
    position: relative; 
} 

p { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Demo

Not eksen Eğer top gelen elemanlar absolute göre pozisyonu ve daha sonra pozisyon 50% set ve ondan çevirmek yapmanız gereken tek şey var olduğunu bu kazandı 't örnek IE8 için, eski tarayıcılarda desteklenmesi, ancak sırasıyla -ms, -moz ve -webkit önekleri kullanarak IE9 ve Chrome ve Firefox'un diğer eski tarayıcı sürümleri yapabilirsiniz.

transform hakkında daha fazla bilgi için, here başvurabilir.

Answer 2

Nasıl line-height eklemeye ne dersiniz?

Fiddle, line-height

Ya #abc üzerinde padding

#abc{ 
    font:Verdana, Geneva, sans-serif; 
    font-size:18px; 
    text-align:left; 
    background-color:#0F0; 
    height:50px; 
    vertical-align:middle; 
    line-height: 45px; 
} 

. This is the result with padding

Güncelleme

css'nizde ekleyin:

#abc img{ 
    vertical-align: middle; 
} 

The result. Umarım aradığın şeyi.

Answer 3

Çok basit: ebeveyn div bunu vermek:

display: table; 

ve çocuk div (ler) bunu vermek: bu kadar

display: table-cell; 
vertical-align: middle; 

!

Answer 4

.parent{ 
 
    display: table; 
 
} 
 
.child{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 20px; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
     Test 
 
    </div> 
 
    <div class="child"> 
 
     Test Test Test <br/> Test Test Test 
 
    </div> 
 
    <div class="child"> 
 
     Test Test Test <br/> Test Test Test <br/> Test Test Test 
 
    </div> 
 
<div>

Sebastian Ekström tarafından bu çözüm buldu. Hızlı, kirli ve gerçekten iyi çalışıyor. Eğer ebeveynin yüksekliğini bilmiyorum bile:

.element { 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Yazının tamamını here okuyun.

Answer 5

Satır yüksekliğini div'in yüksekliği kadar büyük kullanabilirsiniz. Ama benim için en iyi çözümdür bu ->position:relative; top:50%; transform:translate(0,50%);

Answer 6

Eski bir soru ama bugünlerdeCSS3 dikey hizalama yapar gerçekten basit!

Sadece #abc için aşağıdaki css ekleyin:

display:flex; 
align-items:center; 

Simple Demo

Orijinal soru demo updated

Basit Örnek:

.vertical-align-content { 
 
    background-color:#f18c16; 
 
    height:150px; 
 
    display:flex; 
 
    align-items:center; 
 
    /* Uncomment next line to get horizontal align also */ 
 
    /* justify-content:center; */ 
 
}

<div class="vertical-align-content"> 
 
    Hodor! 
 
</div>

Answer 7

bu deneyin:

.main_div{ 
    display: table; 
    width: 100%; 
} 
.cells { 
    display: table-cell; 
    vertical-align: middle; 
} 

bir div ortalamak için bir başka yöntem:

<div id="parent"> 
    <div id="child">Content here</div> 
</div> 

#parent {position: relative;} 

#child { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 50px; 
    height: 100px; 
    margin: auto; 
} 

Answer 8

Bu Kod Dikey Orta ve Yatay Merkezi hizalayın mı:

.parent-class-name { 
 
    position: relative; 
 
} 
 

 
.className { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
}