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制作的20种loading动效
Jul 05 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 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
php 移除数组重复元素的一点说明
2008/11/27 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
再谈JavaScript线程
2015/07/10 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
Python入门篇之文件
2014/10/20 Python
说一说Python logging
2016/04/15 Python
django-allauth入门学习和使用详解
2019/07/03 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
会计出纳岗位职责
2013/12/25 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
项目投资意向书
2014/04/01 职场文书
初中班主任评语大全
2014/04/24 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
商务宴会祝酒词
2015/08/11 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL