Li list-style-image 图片垂直居中 不指定

郝聪 , 2014/03/21 17:04 , DIV+CSS , 评论(3) , 阅读(15526) , Via 本站原创 | |


更多



如果使用list-style-image设置了一个列表项的前面的小图标,在FF下是正常显示的,   list-style-image 图片垂直居中;但是在IE下测试无效,因此,选择使用ul liçš„backgrou-image(背景图片)来解决。

代码如下:

XML/HTML代码
        
  1. ul li{  
  2.     
  3. height:28px; /*列表项的高度*/  
  4.     
  5. line-height:28px; /*列表项的行高,行高与高设为相同,文字垂直居中*/  
  6.     
  7. text-indent:15px; /*文字缩进15个像素,不然压到图标了*/  
  8.     
  9. background-image:url("/images/icon.gif"); /*图片的url地址*/  
  10.     
  11. background-position:left 45%; /*背景图片的定位*/  
  12.     
  13. background-repeat:no-repeat; /*禁止图片平铺,显示一个就好了*/  
  14.     
  15. }  
  16.     
  17.   
  18.     
  19. Firefox : li{background-position:left 50%)  
  20.     
  21. IE : li{background-position:left 45%)   

 

上海seo Email
2014/05/15 15:26
学习了新的代码知识
服装搭配技巧 Email
2014/04/28 21:31
又学到知识了。谢谢分享。
也希望楼主有空去我网站玩玩。
品酒居 Email
2014/04/18 14:56
可以了解下了
分页: 1/1 第一页 1 最后页
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]