要素内のテキストの縦の高さを揃えますか？

Question

高さのパーセンテージの要素があるため、線の高さのハックは使用できません。誰もこれを解決する方法に関するアイデアはありますか？ここで

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

Answer 1

は何をしたいです：value_of_div_height：http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

あなたはdivの、そしてセット行の高さの高さの値を設定する必要があります。 line-height 100％はdiv要素ではなくテキストの値をとるため動作しません。あなたはdiv要素内の段落を行いたい場合は、代替方法

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

限り、高さ=行の高さなど、垂直整列の有無にかかわらず動作します：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

あなたが設定した場合フォントサイズ、あなたが持っているテキストの行数を知っている。 スパン内のテキストを折り返すことができます。スパンで次のCSSを使用します。

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