如何讓list-style-image圖片垂直置中?

來源:互聯網
上載者:User
如果使用list-style-image設定了一個清單項目的前面的小表徵圖,在FF下是正常顯示的,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%)

具體百分比請試一試!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.