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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 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
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP CURL使用详解
2019/03/21 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
教师自我鉴定范文
2013/11/10 职场文书
户外宣传策划方案
2014/05/25 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
课题研究阶段性总结
2015/08/13 职场文书
同学联谊会邀请函
2019/06/24 职场文书