单行和多行li文本垂直居中
单行和多行li文本垂直居中
提问于 2010-11-04 17:10:27
我有一个无序列表和一个背景图像集。所有列表项都具有相同的高度，背景图像位于左侧居中。
每一项的文本应该垂直居中， to The 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%;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2010-11-04 18:09:56
这是一个跨浏览器最多的解决方案
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标记上使用条件注释
Stack Overflow用户
发布于 2010-11-04 17:36:00
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>应该能行得通。
编辑:已更新以查看更改
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4095165
复制相关文章
相似问题
腾讯云开发者
