html - CSS让文本在列表中与自定义项目符号正确对齐

Question

我试图让列表中的文本正确对齐，但我无法正确对齐。

如您所见，文本略微偏离并从“图像项目符号”基线开始。我希望它在中间。

来源：

//CSS
ul  {
    list-style-image:url(image/li.png);
    list-style-position:outside;
    margin:0; padding:0;
}
ul li {
    margin:0; padding:0;
}

//HTML
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Answer 1

现在定义您的li 背景图像并background position根据您的设计定义

ul  {
    list-style:none;
     margin:0; padding:0;
}
ul li {
    margin:0; padding:0;
  background:url('') no-repeat 0 0;
  padding-left:40px;  // according to your image with
  min-height:40px; // according to your image height
}

演示

DEMO2 根据 OP 的确切要求

Answer 2

您必须将 li 元素的 line-height 属性设置为与自定义图标的高度相同。

例如，如果您的图标高度为 32px，您应该写：

ul li {
  line-height: 32px;
}

最好使用 id 来标识 ul 元素，否则最终可能会影响文档中的所有 ul。