Is there a way to arrange the alignment of List Items (LI) when using an image as a bullet?

Question

I have the following CSS

.ul{
    list-style-image:url(/images/bullet.png)
}

My bullet.png is 20 x 20px however it is displaying the text at the bottom of the image while I need to display my text in the middle of the image. Is there a way to assign margins and paddings that move only the text?

Answer 1

Not really. You can try removing the bullets, put padding on the LI and a background-image aligned left and center: background: url(images/bullet.png) no-repeat left center;.

Answer 2

Reset the paddings and margins.

Use background-image property and set a padding of the size of the image (and more if you want some space between your bullet and your text)

li
{
  margin: 0;
  padding: 0 20px 0 0;
  background-image:url(/images/bullet.png);
  background-repeat: no-repeat;
}