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 box-sizing属性
Apr 17 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 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
一个多文件上传的例子(原创)
2006/10/09 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
element中的$confirm的使用
2020/04/26 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
Python程序中设置HTTP代理
2016/11/06 Python
python绘制中国大陆人口热力图
2018/11/07 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
小学毕业家长寄语
2014/01/19 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
个人工作能力自我评价
2015/03/05 职场文书