New Bookstore! Save 20% on books with discount code: LAUNCH
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: Deep dive into WP theme development.

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

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
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.