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; 
} 

爲什麼在這個例子中垂直對齊不起作用？ 有可能嗎？如果是，我該如何做到？

活生生的例子：http://jsfiddle.net/gQM68/與你的答案

Answer 1

文本對齊尊重其線高度，所以無論您是通過增加線高度然後應用垂直對齊

或

使用填充頂

可以通過這個鏈接引用

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

或

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

Answer 2

的vertical-align property僅適用於行內和table-cell元素。您可以通過在li元素內使用span元素，並在span（例如）上設置vertical-align來解決此限制。

<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

可以使用vertical-align與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; 
}