Question

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

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

2 个答案: