如何在列表中垂直对齐多行文本？ [英] How can you vertically align multi-line text within a list?

问题描述

示例： 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>

这是很平凡的垂直对齐文本，并使高度等于行的高度，如果你有一个

This is trivial with vertically aligning text and making the height equal to the line-height if you have one line only but any more than that, things look really screwy.

推荐答案

您可以使用帮助程序：元素之前添加嵌套< span> ：

You can do it with a helper :before element and by adding a nested <span>:

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

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

这里是演示。

这是因为两个inline-block元素将彼此垂直对齐。 ：before 规则创建一个与其父级相同高度的inline-block元素，变量height < span> 可以垂直对齐。

This works because two inline-block elements will vertically align with each other. The :before rule creates an inline-block element that is the same height as its parent, which the variable height <span> can vertically align with.

有关其工作原理的完整说明，查看此答案关于垂直对齐图像。

For a complete explanation of how it works, see this answer about vertically aligning images.

这篇关于如何在列表中垂直对齐多行文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！