CSS讓文本在自定義項目符號列表中正確對齊

Question

我想讓我的列表中的文本正確對齊，但我無法正確對齊。

正如你所看到的文字是稍微偏離，並在「圖像子彈」基線開始。我希望它在中間。

來源：

//CSS 
ul { 
    list-style-image:url(image/li.png); 
    list-style-position:outside; 
    margin:0; padding:0; 
} 
ul li { 
    margin:0; padding:0; 
} 

//HTML 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

Answer 1

現在定義您li背景圖片並根據設計

ul { 
    list-style:none; 
    margin:0; padding:0; 
} 
ul li { 
    margin:0; padding:0; 
    background:url('') no-repeat 0 0; 
    padding-left:40px; // according to your image with 
    min-height:40px; // according to your image height 
} 

Demo

DEMO2按OP的具體要求設計。定義background position ent

Answer 2

你必須設置li元素的line-height屬性是一樣的自定義圖標的高度。

例如，如果你的圖標有32PX的高度，你應該寫：

ul li { 
    line-height: 32px; 
} 

更好地使用ID來標識UI元素，否則你可能最終影響到文檔中的所有上行。