如何在列表中垂直对齐多行文本？

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

这是它的实际演示.

这是有效的,因为两个内联块元素将彼此垂直对齐.该:before规则创建一个内嵌块元素,其高度与其父级相同,可变高度<span>可以垂直对齐.

有关其工作原理的完整说明,请参阅有关垂直对齐图像的答案.

Answer 2

您可以通过span在标记中添加a 然后display:table在css中使用etc 来执行此操作:

<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/