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]

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

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”]
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
[/code]

[code lang=”css” title=”CSS”]
ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
}

li {display:inline-block;}
[/code]

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

Comments