Question

我想知道是否有办法确定list-style-image的水平和垂直对齐方式？

因为目前它看起来像这样：

_ LIST TEXT

我希望它像这样

- 列出文字

非常感谢！

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

列表样式图像的对齐方式

2 个答案: