css list-style-image不在（垂直）中心

Question

我有这个简单的ul li脚本和list-style-image。

问题是图像不是（垂直）中心。

vertical-align在这里没有帮助。

有什么想法吗？

http://jsfiddle.net/nDX6g/

ul {
    margin-top: 10px;
    padding-left: 50px;
    color: #3C4355;
    margin-bottom: 6px;
}

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    list-style-image: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif');
}




<ul>
    <li>Text 1</li>
    <li>Text 2</li>
</ul>

Answer 1

示例：http://jsfiddle.net/nDX6g/3/

li {
   list-style: none;
}

li:before {
   content: url(...);
   display: inline-block;
   vertical-align: middle;
   margin-right: .5em;
}

---

如果您的商品可能跨越两行（或更多行），请尝试另一个小提琴：http://jsfiddle.net/nDX6g/4/

截图：

Answer 2

您可以使用背景图像正确调整背景位置：

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    background: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif') 0 0 no-repeat;
    padding-left: 20px;
    list-style-type: none;
}

演示：http://jsfiddle.net/dfsq/nDX6g/2/

Answer 3

检查此 demo jsFiddle

CSS

ul {
    margin-top: 10px;
    padding-left: 50px;
    color: #3C4355;
    margin-bottom: 6px;
}

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    padding: 0px 0px 0px 25px;
    list-style: none;
    background: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif') no-repeat left top;
}

结果