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

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

Answer 2

可以为li-tag定义img-tag或background：url（..）而不是“list-style-image”

Answer 3

你可以

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

Answer 4

如果每个列表项只有一行，则可以向padding-bottom元素添加一些li

Answer 5

我还需要在背景属性

中添加“no-repeat”