列表样式图像的对齐

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; 
}