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

list-style-image 图片垂直居中

2010-06-24

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

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

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

效果演示:

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

具体可以自己调整下。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们