如何讓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%)

具體百分比請試一試!

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.