Center-align lists

It’s easy to center-align a bunch of text:

[code lang=”html” title=”HTML”]
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

[code lang=”css” title=”CSS”]
p {text-align:center;}

But how do you center-align a list such as a ul or an ol with children set as inline (or side by side)?

Simply set the parent (ul) to text-align:center and the children (li) to display:inline-block

[code lang=”html” title=”HTML”]
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

[code lang=”css” title=”CSS”]
ul {

li {display:inline-block;}

This is useful for footer links displayed in mobile browsers wherein you want texts to center-align.

See a demo at CSSDesk


Leave a Reply

Your email address will not be published. Required fields are marked *