如何垂直對齊列表中的多行文字？

Question

實施例：jsfiddle.net/h5sE6/

CSS：

ul { 
    float: left; 
    margin-right:20px; 
} 
ul li { 
    height: 3em; 
    border: 1px solid #ff0000; 
    width:200px; 
} 

HTML：

<ul> 
    <li> Some text</li> 
    <li>Some text<br />some more text</li> 
    <li>some test text3</li> 
    <li>even more text<br />and more</li> 
</ul> 
<ul> 
    <li> Some text</li> 
    <li>Some text<br />some more text</li> 
    <li>some test text</li> 
    <li>even more text<br />and more</li> 
</ul> 

這是微不足道的與垂直對齊文本並且使高度等於行高，如果你有一行僅但除此之外，事情看起來真的很棘手。

Answer 1

你可以用幫手來做:before元素，並通過添加一個嵌套<span>：

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

ul li:before{ 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%;  
} 

下面是它a demo在行動。

這是有效的，因爲兩個內嵌塊元素將相互垂直對齊。 :before規則創建一個內嵌塊元素，其高度與其父級相同，可變高度<span>可以垂直對齊。

有關垂直對齊圖像的完整說明，請參閱see this answer。

Answer 2

您可以通過添加一個span到您的標記，然後在你的CSS使用display:table等做到這一點：

<ul> 
    <li><span>Some text</span></li> 
    <li><span>Some text<br />some more text</span></li> 
    <li><span>some test text</span></li> 
    <li><span>even more text<br />and more</span></li> 
</ul> 

CSS

ul { 
    display: table; 
    border-collapse: collapse; 
    width: 100%; 
} 

ul li { 
    height: 3em; 
    border: 1px solid #ff0000; 
    display: table-row; 
} 

ul li span{ 
    display:table-cell; 
    vertical-align: middle; 
} 

例子：http://jsfiddle.net/jasongennaro/nePt6/