Li list-style-image 图片垂直居中实现方法


Posted in HTML / CSS onMay 21, 2023

list-style-image 图片垂直居中如果使用list-style-image设置了一个列表项的前面的小图标,在FF下是正常显示的,但是在IE下想让他也居中正常的显示,死活不听话。
退而求其次,找了一个折中的解决办法,
就是使用ul li的backgrou-image(背景图片)来解决。

如下:

ul li{
height:28px; /*列表项的高度*/
line-height:28px; /*列表项的行高,行高与高设为相同,文字垂直居中*/
text-indent:15px; /*文字缩进15个像素,不然压到图表了*/
background-image:url("../images/icon.gif"); /*图片的url地址*/
background-position:left 45%; /*北京图片的定位*/
background-repeat:no-repeat; /*禁止图片平铺,显示一个就好了*/
}

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

具体百分比请试一试!

 
HTML / CSS 相关文章推荐
css3进行截取替代js的substring
Sep 02 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
box-shadow单边阴影的实现
VW、VH适配移动端的解决方案与常见问题
May 21 #HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 #HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 #HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 #HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 #HTML / CSS
You might like
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Python中的choice()方法使用详解
2015/05/15 Python
python实现RSA加密(解密)算法
2016/02/17 Python
python中的错误处理
2016/04/10 Python
有趣的python小程序分享
2017/12/05 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
基于python实现删除指定文件类型
2020/07/21 Python
JAVA程序员自荐书
2014/01/30 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书