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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
深入PHP autoload机制的详解
2013/06/09 PHP
Destoon模板制作简明教程
2014/06/20 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
js中开关变量使用实例
2017/02/24 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
初步讲解Python中的元组概念
2015/05/21 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
python 爬取小说并下载的示例
2020/12/07 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
五年级英语教学反思
2014/01/31 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
初三学习决心书
2014/03/11 职场文书
求职信的正确写法
2014/07/10 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
简历自我评价范文
2019/04/24 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL