How do I vertically center the text in a
without affecting the list bullet?

Question

I am trying to build a simple website, the HTML is like this:

<ul>
    <li class="l1">Test item 1</li>
    <li class="l2">Test item 2</li>
</ul>

You can see the text does not align with the bullets. Here is what I tried:

ul{
  display: table;
}

and

li{
  display: table-cell;
  text-align:middle;
}

But the bullets disappeared:

So I wanna ask if there are any ways to vertical center the text in the list item without affecting the bullets?

could you please give us a demo that shows the mis-alignment? — kukkuz, Sep 03 '16 at 14:54
Can you please make a jsfiddle for this or you can use text-align:center; — Parveen Sachdeva, Sep 03 '16 at 14:56
Can you clarify what you want to center relatively to what else? The text contents relatively to the `li`? The `li` relatively to the `ul`? — Oriol, Sep 03 '16 at 15:07

Oriol · Accepted Answer · 2016-09-03T20:06:45.010

Only list-items have markers:

The ::marker pseudo-element represents the automatically generated marker box of a list item. (See display: list-item.)

So you need list-item:

The list-item keyword causes the element to generate a ::marker pseudo-element box with the content specified by its list-style properties (CSS 2.1§12.5 Lists) together with a principal box of the specified type for its own contents.

CSS Display 3 introduces some variants of list-item:

list-item block flow
list-item block flow-root
list-item inline flow
list-item inline flow-root
list-item run-in flow
list-item run-in flow-root

but it seems there is no browser support, so better use the old display: list-item.

That's why, if you use display: inline-block or display: table-cell, the markers disappear.

If you want to align the markers vertically, the CSS Lists and Counters drafts allows

li::marker {
  display: inline-block;
  vertical-align: middle;
}

However, don't expect any browser to support this yet. Instead, I would recommend hiding the markers and using a ::before pseudo-element instead:

ul {
  list-style: none;
  padding-left: 0;
}
li::before {
  content: url('image.ico');
  display: inline-block;
  vertical-align: middle;
}

Note the behavior will be like if you used list-style-position: inside, which may not look right if the list items have line breaks. You can try absolute positioning if you want to emulate list-style-position: outside.

```list-style-position: inside``` worked in my case – Matias Haeussler Sep 13 '21 at 19:11 — Matias Haeussler, Sep 13 '21 at 19:11

Paul Sandel · Answer 2 · 2016-09-03T17:10:06.557

0

Revised answer:

looking at the images you've provided, the problem may be with the icon. If you re-crop the image with less empty space at the bottom, it may align correctly.

The icon, by default, will vertically align according to line-height. If it's larger than the line height, you end up with incorrect alignment.

Try adjusting the line height in your css for the li to be the same height as the icon. If there is empty space at the bottom of the icon, crop it out.

Or recreate your icon to be the same height as your line height, and try to remove all extra space in the image.

edited Sep 03 '16 at 17:10

answered Sep 03 '16 at 15:57

Paul Sandel

235
2
13

This centers horizontally, not vertically. – Oriol Sep 03 '16 at 17:00

How do I vertically center the text in a without affecting the list bullet?

2 Answers2

How do I vertically center the text in a
without affecting the list bullet?