CSS Center Unordered Lists UL/OL/LI Menus and Navigation

If you’ve ever wanted to center the list-items in an unordered or ordered list, you may be running in to some trouble trying to figure out the right combinations of margin:0 auto’s and center text aligns. The solution is simpler than you may think, using one center text align and one display:inline line of CSS, you can easily center your UL items. For kicks, I also gave my LI content some margins just to show a working example of a center-aligned menu or navigation system.

First, set up your unordered list and list items with some links or content to your different navigation pages.

<ul class="ourULclass">
     <li><a href="/a-page.htm" title="A Page!">A page!</a></li>
     <li><a href="/a-nother-page.htm" title="Another Page!">Another page!</a></li>

Now for the CSS:

.ourULclass { list-style:none; text-align:center; }
.ourULclass li { display:inline; margin:0 3px; }

Voila! You now have a centered UL navigation menu!

Posted in CSS, HTML