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实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
深入理解Django中内置的用户认证
2017/10/06 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python程序文件扩展名知识点详解
2020/02/27 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书