Vertically center <li> text with bullet image?

Question

So I am trying to figure out how I can vertically align some text that I have with a custom bullet image. Here is what I have:

<ul>
    <li>LINE OF TEXT</li>
    <li>LINE OF TEXT</li>
    <li>LINE OF TEXT</li>
</ul>

And for the CSS...

#div .class
{
    color: #4c361c;
    font-size: 13px;
    list-style-image: url(../images/image.png);
}

#div .class li{ }

Does anyone have anyideas on how to go about doing this?

Answer 1

Here's a demo.

Using a background image can get you the desired effect.

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS

ul {
    list-style: none;
}

ul > li {
  background: url('../imgpath/bullet-image.png') no-repeat left center;

  /* Adjust the padding for your custom bullet image */
  padding: 10px 0 10px 34px;
}