使用文本按比例对齐列表样式图像

Question

所以我有

<ul>
  <li>Hello</li>
</ul>

和

li {
    list-style-image: url(../img/bullet.png); /* 13x13 px */
    /* line-height: 13px; */
    /* vertical-align: middle; */
    padding-left: 5px;
}

看起来像

正如你可以看到文本和图像元素<li>没有垂直对齐(图像高于文本),我尝试应用行高和垂直对齐(注释掉代码),但它甚至没有.有没有办法实现良好的一致性？

Answer 1

在您的情况下,填充将仅影响元素内部的任何内容 - 文本.

唯一可用的位置调整属性是list-style-position,但唯一允许的值是inherit,inside或outside.最常见的做法是使用:

list-style: none;

然后应用所需的图像作为<li>背景

li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}