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 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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 读取shell管道传输过来的内容
2010/03/01 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python3中property使用方法详解
2019/04/23 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python打开文件的方式有哪些
2020/06/29 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
护士感人事迹
2014/05/01 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
学生检讨书怎么写
2014/10/09 职场文书
开票证明
2015/06/23 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
python之基数排序的实现
2021/07/26 Python