centering a UL with floated LI's

[scarhand]

heres my example:

 

#theul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#theul li {
float: left;
}
#theul li a {
display: block;
}



<ul id="theul">
<li><a href="#">horizontal menu item 1</a></li>
<li><a href="#">horizontal menu item 1</a></li>
<li><a href="#">horizontal menu item 1</a></li>
</ul>

 

How do I get this menu perfectly centered on the page, for a dynamic width?

[jcombs_31]

Just change the margin to

 

margin: 0 auto;

[TheFilmGod]

Just change the margin to

 

margin: 0 auto;

 

That's incorrect. The ul does not have a fixed width, so the browser will stretch the width of the <ul> tag 100%.

 

Centering a list that has floated items within itself is difficult. You could do "display: table" on the ul and then use "margin: 0 auto;" or you could just compute the pixel/em width of the ul tag by hand and put it directly in there.

[jcombs_31]

It is still technically centered.  If the list is supposed to stretch to 100% and the items are floated, it doesn't make sense not to just display them inline and center the text.  What defines the 'dynamic width', the container? 

[ifubad]

using display:table has problems with certain browsers, especially with some IE

 

This is one of the better options for centering a floated list, personally, I prefer the first option on this page

http://pmob.co.uk/pob/centred-float.htm