David Stockdale's Scrapcode

Centre Align List Bullet Point

If you’re trying to centre align a list but the bullet point (or “marker”) is not moving with the text here’s why:

The “list-style-position” is set to “outside” by default.

This means that the marker is outside of the list that you are changing the alignment of.

My solution is to set some Additional CSS like this:

/**
 * Adds the option to center lists!
 */
ul.middle {
	list-style-position: inside;
	text-align:center;
}

And then adding “middle” to the “Additional CSS class(es)” of any lists that I want centred.

Leave a Reply