垂直居中单行和多行 li 文本答案

【问题标题】：Center single- AND multi-line li text vertically垂直居中单行和多行 li 文本
【发布时间】：2011-05-04 22:55:49
【问题描述】：

我有一个带有背景图像集的无序列表。所有列表项具有相同的高度，背景图像位于左中心。

每个项目的文本应垂直居中到 li。这适用于单行文本（通过根据 li 的高度设置行高），但不适用于 两行文本。

我可以将“line-height:normal”添加到两行项目，但我想要一个适用于所有项目的解决方案。

我该怎么做？

例子：

li { 
    list-style-type:none; 
    padding-left:40px; 
    height:36px;
    line-height:36px; 
    background:url('tick.png') no-repeat 0 50%; 
}

【问题讨论】：

你有一些我们可以看到的代码吗？如果你能发布你迄今为止尝试过的东西，对我们来说会更好:)
您需要在哪个浏览器中使其工作？还有IE6/7？
一个 CSS 示例：li { list-style-type:none;填充左：40px；高度：36px；行高：36px；背景：url('tick.png') 不重复 0 50%;如果我在 li 中有一行文本，它可以工作，但有两行它就不行。
它应该也适用于 IE6 和 7。

标签： css list center

【解决方案1】：

这是一个最跨浏览器的解决方案

    li {
    	width           : 200px;
        line-height     : 100px;
        height          : 100px;
    	border          : 1px blue solid;        
    }
    li span {
    	display				: -moz-inline-box;  /* FF2 or lower */
    	display				: inline-block;     /* FF3, Opera, Safari */
        line-height         : normal;
        vertical-align      : middle;    
    }
    
    li span		{ *display	: inline;} /* haslayout for IE6/7 */

<ul>
       <li><span>My text</span></li>
       <li><span>My longer text</span></li>
       <li><span>My text, but this time is really wide</span></li>
       <li><span>My text, some thoughts about how much it will expand in this item.</span></li>
    </ul>

为了简洁起见，我使用了star hack，你应该避免。只需使用 html5boilerplate 解决方案，它在 body 标签上使用条件 cmets

【讨论】：

谢谢你，绝对是我找到的最好的解决方案，真是个英雄！
在没有固定高度的情况下效果更好，在本例中为height: 100px;。更多行文本调整区域大小。还可以使用padding 或margin 定义顶部和底部所需的间隙。我的问题是，这里是否存在没有包装跨度的解决方案？
不幸的是，IE 有一个 bug（至少 IE9 是这样）；当您设置 list-style:none 时，它会跳回顶部。所以要么我的文字愚蠢地坐在屏幕顶部，要么我有一个丑陋的要点，我无法摆脱。再次感谢 IE。
漂亮，即使是多行换行！

【解决方案2】：

li {
    height:200px; 
    line-height:200px;
    border:1px solid red;
}
li span {
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2;
}

<li>
    <span>two<br />lines</span>
</li>

它应该可以工作。

编辑：更新以查看更改

【讨论】：