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的具体要求