简明现代魔法 -> CSS层叠样式表 -> list-style-image 图片垂直居中

list-style-image 图片垂直居中

2010-06-24

如果使用list-style-image设置了一个列表项的前面的小图标，在Firefox和Chrome下是正常显示的。

但是在IE下想让他也居中正常的显示，死活不听话。

退而求其次，找了一个折中的解决办法，就是使用ul li的backgrou-image（背景图片）来解决。

效果演示：

• 我是一个列表项。

• 我是一个列表项2，我居中了。

CSS Code：

.imgs { padding-left:4em; }
.imgs li { list-style-image:url(images/icon2.jpg); border:1px solid #ccc; }

.imgs2 { padding-left:1em; }
.imgs2 li{ 
	height:46px;    /*列表项的高度*/
    line-height:46px;    /*列表项的行高，行高与高设为相同，文字垂直居中*/
    text-indent:4em;    /*文字缩进15个像素，不然压到图表了*/
    background-image:url(images/icon2.jpg);    /*图片的url地址*/ 
    background-position:left 45%;    /*背景图片的定位*/
    background-repeat:no-repeat;    /*禁止图片平铺，显示一个就好了*/
}

HTML Code

<ul class="imgs">
	<li>我是一个列表项。</li>
</ul>

<ul class="imgs2">
	<li>我是一个列表项2，我居中了。</li>
</ul>

针对浏览器的差异：

Firefox : li{background-position:left 50%)
IE : li{background-position:left 45%)

具体可以自己调整下。