Like so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker.
A reader wrote in with a screenshot of what they were trying to accomplish — basically an ordered list (<ol>) with the list markers (1., 2., 3., etc) on top of the list content and centered. In the screenshot, the text was centered, but the numbers were not. So, let’s get those numbers centered!
The first thing to know is that list-style-position needs to be inside. That’ll get the centering party started. If we have a break before the content, we’re pretty much there. In the video, we play with using the ::marker to do this, while finding limitations and exploring all the ideas.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 86 | 68 | No | 86 | 11.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 126 | 127 | 126 | 11.3-11.4 |