Vertically center <li> text with a bullet image?

Question

So, I'm trying to figure out how I can vertically align the 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 CSS ...

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

Does anyone know how to do this?

Answer 1

Here is a demo .

Using a background image may give 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; } 

Answer 2

Define li background bullets and set the background-position according to your design

like this

Css

 ul{ margin:0; padding:0; list-style:none; } li { background:url("http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon.jpg") no-repeat 0 -2px; padding-left:20px; line-height:14px; font-size:14px; margin-top:12px; } 

Live demo