让 list-style-image 图片垂直居中

list-style-image 图片垂直居中
如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的，

但是在IE下想让他也居中正常的显示，死活不听话。
退而求其次，找了一个折中的解决办法，

就是使用ul li的backgrou-image（背景图片）来解决。
如下：

css list-style-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%)

具體數值自己試一試

转载于:https://www.cnblogs.com/didi/archive/2010/06/24/1764547.html

让 list-style-image 图片垂直居中相关推荐

position属性及实现图片垂直居中
转自: http://blog.onlygrape.com/position/186 定义 position 属性把元素放置到一个静态的.相对的.绝对的.或固定的位置中. span>positi ...
设置图片垂直居中line-height和vertical-align的区别
设置图片水平居中line-height和vertical-align的区别先看一个案例:目的是使图片相对于模块垂直居中 <!DOCTYPE html> <html lang=&qu ...
垂直居中及容器内图片垂直居中的CSS解决方法
方法一: <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; h ...
讨论了好久的问题，IE、Firefox下CSS图片垂直居中的问题
通过百度和谷歌找了好久都没找着一个合适的方法.以下是自己找出的一种方法,自认为还可以,而且,也方便简单. IE:当容器为div,或者tr,只要把容器的Css属性line-height设置成容器的高度就 ...
Div图片垂直居中的方法
<style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-a ...
文字相对于图片垂直居中
思路: 左右孩子容器宽度分别占50%,让左孩子图片的高撑开图片父元素和祖父元素,使得祖父父元素的高''继承''图片的高度,让右边孩子容器绝对定位,并且高度为height:100%,得到图片元素的高度. ...
CSS 图片垂直居中的解决办法
文章参考让html img图片垂直居中的三种方法 flex的align-items: center; <div class="duty-header__label"> ...
a标签居中 img vue,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方式教程,依据代码与文章教程熟习掌握并加以应用. 一.使用flex完成垂直居中操纵css flex实现垂直居中.flex或许不是完成垂直居中最好的选择,由于IE ...
html文字竖直书写,css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center,上下竖直居中的写法如下, 图片垂直居中的代码文字.图片居中显示的方法 .content{ height: 40px; line-heigh ...
图片垂直居中的CSS技巧
今天遇到的问题:使用纯CSS实现未知尺寸的图片在275px的正方形容器中(高宽都小于275px)水平和垂直居中. 主要在于:图片未知大小,而且要求垂直居中. 下面是找的一个权衡的相对结构干净,CSS简 ...

让 list-style-image 图片垂直居中

让 list-style-image 图片垂直居中相关推荐

最新文章

热门文章