Help With list-style-image

Question

I have set an image 32x32px as a list style image like this:

.class li{
    list-style-image:url(../images/site/img.png);
}

It works great but the problem is the text is on the bottom of the list item (because the image is 32px high the list item is also 32px high). I would like to have the text vertically centered so it looks good.

I tried:

.class li{
    line-height:1em;
}

But that didn't help.

Answer 1

You can use the vertical-align property to specify centered alignment. Like so:

.class li {
    vertical-align: middle;
}

Answer 2

The list-style-image tag should be applied to the list itself, and not the list item as you have. So it would be..

ul.class{
    list-style-image:url(../images/site/img.png);
}