#202: Centered List Markers

Avatar of Chris Coyier
Chris Coyier on

Let’s put those CSS skills to work! Claim $50 in free hosting credit on Cloudways with code CSSTRICKS.

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.



Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari