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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP实现微信发红包程序
2015/08/24 PHP
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
国税会议欢迎词
2014/01/16 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
长城的导游词
2015/01/30 职场文书
中秋节晚会开场白
2015/05/29 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
初三语文教学反思
2016/03/03 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis