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

Answer 3

Setting your line-height to the height of the element will align text vertically. So if you <li> height is 32px then set your line-height to 32px.

.class li { height:32px; line-height:32px; list-style-image:url(img.png); }