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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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实现短信发送代码
2015/07/05 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
高三自我鉴定
2013/10/23 职场文书
有个性的自我评价范文
2013/11/15 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
预备党员思想汇报
2014/01/08 职场文书
大课间活动制度
2014/01/18 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2015年班组长工作总结
2015/04/10 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书