Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
Web Dev + WordPress + Security

CSS: Center-Align List with Left-Aligned Text (and Unknown Width)

Here is a quick CSS tutorial showing how to center-align a list element with left-aligned text. For example, if you have an <ul> or <ol> of unknown width, and you want it to stay centered on the page and keep the inner text aligned to the left. That’s the trick we’re looking at in this tutorial.

Working on the testimonials page for my new bookstore, I wanted to center align the unordered list without specifying a width. When you specify a width, center-aligning is easy using margin: auto;. Like this example:

ul { 
	width: 400px; 
	margin-left: auto; 
	margin-right: auto; 
	}

When you go that route, you get a center-aligned list with all of the text aligned to the left. So this is the easiest solution for lists (and other elements) that have a known/set fixed width. But of course, I did not want to specify a width for this particular case.

So without setting a width on the list element, I added text-align: center; to the parent div and got this:

Center aligned list element with center-aligned textNotice the bullets on the list are located far to the left of the list items

The list bullets are displayed left-aligned, but the list text is center-aligned. So there is a strange gap between the bullets and the text for each list item. The solution is to make the list an inline-block and set its text-align to left. Here is the final code:

div.parent {
	text-align: center;
	}
ul { 
	display: inline-block; 
	text-align: left; 
	}

And the HTML markup looks like this:

<div class="parent">
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</div>

Here is the final result:

Center-aligned list with left-aligned list textThe above code results in a list that is center-aligned but with left-aligned text

Mission accomplished. This technique also adds the benefit of respecting the margin of the preceding paragraph tag. Before we made the list inline-block, the vertical distance between the list and the preceding paragraph looked like this:

Collapsed margins on adjacent block-level elementsWith the list as a block-level element, the margins are collapsed with adjacent block-level elements

Notice how the paragraph bottom margin is ignored/collapsed, so the list sits close to the paragraph text. Now compare the vertical spacing after changing the list element to an inline-block:

Preserved margins on block elements next to inline-block elementsWith the list as an inline-block element, the margins are preserved with adjacent block elements

Now the inline-block list respects the paragraph margin. So there is more vertical space and things don’t look so crowded.

Anyway, thought is was a neat technique to share. Enjoy!

Jeff Starr
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
.htaccess made easy: Improve site performance and security.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Air finally clearing here in WA. Feeling grateful to breathe again. #oxygenmatters
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Spent some time updating my article on unsafe characters, once again current with latest IETF specification.
Just realized that “Neo” is an anagram for “One”. As in, “he is the One” (The Matrix).
To get VLC app to load all songs (including subfolders), go to Preferences ▸ Show All ▸ Playlist ▸ Subdirectory behavior ▸ Expand.
Switching from PhotoShop to Affinity Photo is one of the most liberating work-related things I've done in 20 years.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.