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中31种选择器使用方法教程
Dec 05 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
用Socket发送电子邮件
2006/10/09 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP引用(&)各种使用方法实例详解
2014/03/20 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
三级下拉菜单的js实现代码
2011/05/23 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
思想政治教育专业个人求职信范文
2013/12/20 职场文书
初三政治教学反思
2014/01/30 职场文书
拾金不昧表扬信
2015/01/16 职场文书
工程合作意向书范本
2015/05/09 职场文书
保险公司增员口号
2015/12/25 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js
Java界面编程实现界面跳转
2022/06/16 Java/Android