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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 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
Smarty安装配置方法
2008/04/10 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php中JSON的使用与转换
2015/01/14 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Django如何实现上传图片功能
2019/08/16 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
python自动化发送邮件实例讲解
2021/01/04 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
python热力图实现简单方法
2021/01/29 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
小学数学课后反思
2014/04/23 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL