我有一个无序的列表与背景图像集。所有列表项具有相同的高度，背景图像位于左中心。
每个项目的文本应该垂直居中。这对单行文本(通过根据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%;
}
解决方法
这是一个最流行的解决方案
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>
为了简洁，我使用了star hack，你应该避免。只要使用html5boilerplate解决方案，它将使用body标签上的条件注释
