列表樣式圖像的對齊

Question

我想知道是否有方法來確定list-style-image的水平和垂直對齊方式？

，因爲在目前，它看起來是這樣的：

_列表文本

，我想它是這樣

–列表文本

非常感謝！

Answer 1

你可以嘗試一些方法，例如：

<h3>Using a list-style-image</h3> 
<ul class="basic"> 
    <li>Hello!</li> 
    <li>Good-Bye!</li> 
    <li>See you later!</li> 
</ul> 

<h3>Using a Background Image on li</h3> 
<ul class="bg-img"> 
    <li>Hello!</li> 
    <li>Good-Bye!</li> 
    <li>See you later!</li> 
</ul> 

，看看下面的CSS：

ul.basic { 
    list-style: none; 
    list-style-image: url(http://placehold.it/20x20); 
    margin: 0 0 0 0; 
} 
ul.basic li { 
    margin: 1.00em 0 0 0; 
    padding: 0 0 0 0; 
} 

ul.bg-img { 
    list-style: none; 
    margin: 0 0 0 0; 
} 
ul.bg-img li { 
    background-image: url(http://placehold.it/20x5); 
    background-repeat: no-repeat; 
    background-position: left center; 
    margin: 1.00em 0 0 -30px; 
    padding: 0 0 0 30px; 
} 

在第一種情況下，可以使列表圖像例如一個20x20像素的正方形，並將連字符嵌入圖像的中心。但是，如果字體大小發生變化，您將不會保持垂直居中，因爲列表圖像被固定在li元素的基線上。

在第二個示例中，關閉列表樣式並在li元素上放置背景圖像。再次，將連字符嵌入圖像中，並將其放置在左側和中間。此方法通過調整li元素的左邊距和填充以及background-position屬性，使您可以控制連字符圖案的位置。

作爲參考，看看：http://jsfiddle.net/audetwebdesign/JKZLe/

Answer 2

這是在webkit和mozilla中分別控制的，但-webkit-padding-start和-moz-padding-start規則在<ul>和<ol>元素上。它可以被padding-left覆蓋（這也可以在IE中使用）。

ul { 
    padding-left: 40px; 
}