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 选择器 基本选择器介绍
Jan 21 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
Vue 中mixin 的用法详解
2018/04/23 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
express启用https使用小记
2019/05/21 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python3操作mysql数据库的方法
2017/06/23 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
数百万免费的图形资源:Freepik
2020/09/21 全球购物
微电影大赛策划方案
2014/06/05 职场文书
学校献爱心活动总结
2014/07/08 职场文书
课程设计的心得体会
2014/09/03 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
乡镇团代会开幕词
2016/03/04 职场文书