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(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 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入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
AngularJS内置指令
2015/02/04 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
浅析Python多线程下的变量问题
2015/04/28 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python类反射机制使用实例解析
2019/12/30 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
函数指针的定义是什么
2016/08/14 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
40岁生日感言
2014/02/15 职场文书
离职保密承诺书
2014/05/28 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技