aligning list-style-image proportionally with text

Question

So I have

<ul>
  <li>Hello</li>
</ul>

and

li {
    list-style-image: url(../img/bullet.png); /* 13x13 px */
    /* line-height: 13px; */
    /* vertical-align: middle; */
    padding-left: 5px;
}

which looks like

as you can see text and image element of <li> are not aligned vertically (image is higher than text), I tried applying line-height and vertical-align to it (commented out code), but it didn't even it out. Is there a way to achieve good alignment?

Answer 1

The padding will affect only whatever is inside the element—the text, in your case.

The only position adjustment property available is list-style-position, but the only permitted values are inherit, inside or outside. The most common practice is to use:

list-style: none;

and then apply the desired image as the <li>'s background

li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}