css - 垂直居中单行和多行 li 文本

Question

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

每个元素的文本应垂直居中到 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%; 
}

Answer 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 标签上使用条件注释