UL LIの垂直整列？

Question

<ul> 
    <li class="more">aaa</li> 
    <li class="moretwo">aaa</li> 
    <li class="more">aaa</li> 
</ul> 

.more { 
    background-color: red; 
    height: 50px; 
    vertical-align:middle; 
} 

.moretwo { 
    background-color: green; 
    height: 50px; 
    vertical-align:sub; 
} 

この例では、垂直配置が機能しないのはなぜですか？ できますか？はいの場合、どうすればいいですか？

LIVE例：あなたとhttp://jsfiddle.net/gQM68/はvertical-align propertyのみインラインレベルとtable-cell要素に適用

Answer 1

でvertical-alignを使用することができます線の高さを基準にして、線の高さを上げてから垂直線を適用するかのいずれかを選択します。

または

パディングトップ

を使用して、あなたが参考のために、このリンクをチェックすることができますが

http://jsfiddle.net/gQM68/2/

または

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 2

答えます。この制限を回避するには、li要素内のspan要素を使用し、をspanに設定します。

<li><span class="more">aaa</span></li> 

Answer 3

あなたはspanでテキストを囲む、それが動作するはずの下のようなそのスタイルを設定した場合：

<ul> 
    <li class="more"><span>aaa</span></li> 
    ... 
</ul> 

li span { 
    display: inline-block; 
    vertical-align: middle; 
} 

.more { 
    ... 
} 

.moretwo { 
    ... 
} 

Answer 4

テキストを合わせているdisplay:table-cell

.more { 
    background-color: red; 
    height: 50px; 
    display:table-cell; 
    vertical-align:middle; 
} 

.moretwo { 
    background-color: green; 
    height: 50px; 
    display:table-cell; 
    vertical-align:sub; 
}