Vertically centring bullet images

Question

I, like many other people, am trying to centre some custom bullets vertically. I've looked at a lot of other questions on SO but I can't find exactly the solution I'm looking for. I don't like the solutions using CSS background: url("...") . Examples of the solution I don't want:

Vertical Align - List with "list-style-image"

Adjust list style image position?

Here is my code:

<style type="text/css">
  li {
    position: relative;
    list-style-image: url("/images/bullet.png");
  }
  li>span {
    position: absolute;
    top: 24px;
    transform: translateY(-50%);
  }
</style>

<ul>
  <li><span>List item 1</span></li>
  <li><span>List item 2</span></li>
</ul>

It works pretty well, automatically adjusting to the size of the text but I have two issues with it:

1. I have to use a <span> inside each <li>
2. I have to hard-code the offset by half of the image height (my example image is 48px high so I've used top: 24px; )

I have two questions:

• Can this be done without knowing the image height?
• Is it possible to achieve the same effect without an inner element in each <li> , just text?

Remember, I've already seen the background: url("...") solution and I don't like it.

Answer 1

Try to add your custom bullet in a li:before styling instead of adding a span to every LI
Though if you want the full image to show up, you will need to know the height of the image.