Save 25% on our pro plugins with coupon code: SPRING2023
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 = Web Developer. Security Specialist. WordPress Buff.
WP Themes In Depth: Build and sell awesome WordPress themes.
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 »
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »
Thoughts
Excellent (and free) tool to test your site's SSL configuration.
Plugin updates! All of our free and pro plugins ready for WordPress 6.2.
Daylight savings is a complete waste of time and needs to be eliminated.
Got a couple of snow days here in mid-March. Fortunately it's not sticking.
I handle all email in real time as it comes in, perpetually clear inbox for years now.
Added some nice features to Wutsearch search engine launchpad. Now 21 engines!
.wp TLD plz :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.