Centred list navbar

Author: Russ Weakley

Comments: There have been a few requests for a centred list navbar, so here it is. The key is "text-align: center" applied to the UL element.

Browser support chart

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>

#navcontainer ul
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #036;
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;

li { display: inline; }

li a
text-decoration: none;
background-color: #036;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;

li a:hover
background-color: #369;
color: #fff;

Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.