如何使用 CSS 垂直对齐固定高度列表项内的文本？答案

【问题标题】：How to vertically align text inside fixed-height list items using CSS?如何使用 CSS 垂直对齐固定高度列表项内的文本？
【发布时间】：2015-03-11 07:10:39
【问题描述】：

如何垂直对齐以下列表项中的文本：

http://jsfiddle.net/K2eF3/

<style>

ul { list-style-type: none; width: 300px; }
ul li { border: 1px solid red; height: 100px; }

</style>

<ul>
    <li>A bear</li>
    <li>A panda who eats bamboo</li>
    <li>A giraffe with a very very very very very veryvery very very very long neck</li>
</ul>

我不能使用 line-height 因为这些句子是动态生成的，可能是一行或多行（并不总是单行）。这也是为什么我可以使用自定义填充单独定位每个 <li>。

垂直对齐中间也不起作用，在阅读之后，它似乎只针对目标元素，这解释了为什么使用它在元素内对齐文本不起作用。

【问题讨论】：

Vertically Center Multi-Lined Text

标签： html css

【解决方案1】：

将每个<li> 的内容包装在<span> 中，然后应用以下css：

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

http://jsfiddle.net/K2eF3/12/

【讨论】：

桌子太禁忌了：D
@Sorin 因为表格是在 CSS 之前使用的，并且应该放弃这种做法：p
注意：<span> height = <li> height 对于此修复工作非常重要。

【解决方案2】：

如果你对IE7及以下版本不太担心，可以尝试用div包裹文本并在div上添加display:table-cell、vertical-align:middle和height:100px。

【讨论】：

【解决方案3】：

Safari/Chrome 和 Firefox 有自己的 CSS Flexible Box Module 实现，允许这种布局：

http://jsfiddle.net/K2eF3/4/

但是，遗憾的是，Opera 和 Internet Explorer 还没有 display:-o-box; 或 display:-ms-box;。

【讨论】：

【解决方案4】：

这里是my working solution。

它使用 jQuery 来垂直对齐 li 内的 span。为了确保跨度正确对齐，它应该具有 display 属性应该具有 inline-block 值。

如果您无法将输出更改为 LI 内的 span，我可以使用 jQuery 帮助您完成。

【讨论】：