Centering a Floating List Menu

I have an unordered list…

[CODE]
<div style=”width: 500px;”>
<ul>
<li style=”float: left;”>&nbsp;</li>
<li style=”float: left;”>&nbsp;</li>
<li style=”float: left;”>&nbsp;</li>
<ul>
</div>
[/CODE]

…floating each list element left is the only way I know of that I can have a list without line breaks (for a menu). However, I am also trying to center the list within the div.

I tried putting a “margin: 0 auto;” on the div to center the list within it, as well as putting a 300px wide div within it and applying “margin: 0 auto;” to it as well – neither worked.

I want to be able to keep it dynamic enough to add more list items in the future but still keeping it centered. Does anyone have any suggestions on how I can do this?

NOTE: I’ve tried too many things to name and I couldn’t do it, so please test your suggestions before submitting them to ensure that they work as is assumed.

Thanks,
walman

Also in #CSS _↴