单行和多行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%; 
}

- Raphael Müller

---

你有一些我们可以看到的代码吗？如果你可以发布你到目前为止所尝试过的内容，对我们来说会更好 :) - Kyle

需要在哪个浏览器中使其工作？还是IE6/7？ - fcalderan

一个CSS示例：li { list-style-type:none; padding-left:40px; height:36px; line-height:36px; background:url('tick.png') no-repeat 0 50%; }如果在li中只有一行文本，它可以正常工作，但是如果有两行文本则无法正常工作。 - Raphael Müller

它应该在IE6和7中也能工作。 - Raphael Müller

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>

我为了简洁使用了星号 hack，但你应该避免使用。只需使用html5boilerplate解决方案，在body标签上使用条件注释即可。

- fcalderan

---

谢谢你，这绝对是我找到的最好的解决方案，真是个英雄！ - DanC

更好的方法是不使用固定高度，例如 height: 100px;。多行文本可以自动调整大小。同时，可以使用 padding 或 margin 来定义所需的顶部和底部间距。我的问题是，是否存在不需要包装 span 的解决方案？ - Boris Šuška

不幸的是，IE（至少在IE9中）存在一个错误; 当您设置list-style：none时，它会跳回到顶部。因此，要么我的文本愚蠢地坐在屏幕顶部，要么我有一个丑陋的项目符号无法摆脱。再次感谢你，IE。 - Inigo

美观，即使多行换行也是如此！ - Brock Hensley

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>

它应该可以工作。

编辑：更新以查看更改

- MatTheCat