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

HTML

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

我使用明星黑客为简洁，你应该避免。只需使用html5boilerplate解决方案，它就在body标签上使用条件注释

Answer 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>

它应该有用。

编辑：已更新以查看更改

中心单线和多线li文本垂直

2 个答案: