I created a small list with images I specified as bullets, but at the moment as you can see, they are on same level as the bottom of the text.
Of course I could just add some space to image on the bottom part to display it correctly, but is it possible to move this bullets somehow, that it would be on center of the text height?

2 answers

This was chosen as the best answer

Assuming you are referring to using list-style-image: the answer is no, you cannot position it vertically.

The best approach is to apply the image as a background-image to the li and use a mix of padding, line-height and background position to line up the image.

Of course this only works when you have a single line in your li.

I tend towards using a background image and some top positioning to line it up with the first line of the text at a reasonable font size, rather than the center of the li to avoid the weird position it takes with more than one line of text in the li.

Answered over 8 years ago by Tony Crockford
Mottie 1134

You could just set the image as the li's background (demo):

ul li {
 background: url("http://i25.tinypic.com/9i8shg.png") left 2px no-repeat;
 padding-left: 20px;

Reposition the top of the background image (the 2px above) as desired, negative values can be used as well.

Answered over 8 years ago by Mottie
  • Already did it. Little differently, but in big picture it is almost the same way. Eugene over 8 years ago