将列表样式图像与文本按比例对齐

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> 的文本和图像元素未垂直对齐（图像高于文本），我尝试对其应用行高和垂直对齐（注释掉代码），但它没有甚至它。有没有办法实现良好的对齐？

原文由 Ilja 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Teneff 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以有

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

原文由 Fanky 发布，翻译遵循 CC BY-SA 3.0 许可协议