PDA

View Full Version : Horizontally center an unordered list of unknown width


Ricky55
12-12-2011, 11:07 AM
Everyone knows the trick to centre any element using margin auto but how can I get an unordered list centred when I can't give it a width?

Must work cross browser I have found a few solutions but they don't work in IE.

Any tips much appreciated!

Ricky55
12-12-2011, 11:09 AM
Should also say i can't use text align centre as the li's are set to display block.

Ricky55
12-12-2011, 11:20 AM
Sorry, found a solution now.

For those who may be interested .....


<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/work/">Work</a></li>
<li><a href="/clients/">Clients</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>



#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}