CSS列表样式图像不在（垂直）中心

Question

I have this simple ul li script with list-style-image.

The problem is that the image is not (vertical) center.

vertical-align is not helpful here.

Any idea ?

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

Example: http://jsfiddle.net/nDX6g/3/

li {
   list-style: none;
}

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

---

if your items may span on two (or more) lines, then try this other fiddle: http://jsfiddle.net/nDX6g/4/

Screenshot:

Answer 2

You can use background image to adjust background position properly:

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

Demo: http://jsfiddle.net/dfsq/nDX6g/2/

Answer 3

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

Result