CODEWITHSUNDEEP
htmlcsshtml-lists
CJ Dennis
CJ Dennis

Reputation: 4336

Vertically centring bullet images

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:

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

Upvotes: 0

Views: 86

Answers (1)

D.P.
D.P.

Reputation: 11

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.

Upvotes: 1

Related Questions