Bir öğenin içindeki metni yüzde cinsinden dikey olarak hizalamak için?

Question

Yüzde yüksekliğe sahip bir elemanım olduğu için hat boyu kesmeyi kullanamıyorum. Bunu çözmek için herhangi bir fikri olan var mı?

<div height="100%"> 
    I want to be vertically aligned in the middle 
</div> 

Answer 1

Burada istediği bu: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

Sen div yükseklik değeri, daha sonra set çizgi yüksekliği ayarlamak zorunda: value_of_div_height. satır yüksekliğini% 100 çalışmaz, çünkü div öğesinin değil, metnin değerini alır. Bu sürece height = hat-yükseklik olarak, birlikte veya vertical-align olmadan çalışır

div { 
    height: 200px; 
    line-height: 200px; 
    display: block; 
} 

Alternatif yöntem, bir div öğesi içindeki bir paragraf ile yapmak istiyorsanız: http://www.w3.org/Style/Examples/007/center

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV> 

Answer 3

ayarlarsanız yazı tipi boyutu ve sahip olduğunuz metin satırlarının sayısını bilirsiniz. Metni bir yayılma alanı içine alabilirsiniz. Ve açıklıktaki aşağıdaki CSS'yi kullanın.

span { 
    font-size:20px; 
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2) 
    position: relative; 
    top: 50%; 
}