CSS使用自定义项目符号在列表中正确对齐文本

Question

我正在尝试将列表中的文字正确对齐，但我无法正确使用。

正如您所看到的那样，文字稍微偏离并从＆＃34;图像子弹＆＃34;开始。基线。我希望它在中间。

来源：

//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元素的line-height属性设置为与自定义图标的高度相同。

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

ul li {
  line-height: 32px;
}

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

Answer 2

现在定义您的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
}

的 Demo 的

DEMO2 根据OP的确切要求