Hi All,

My question is how do I best use css to center a set of three horizontal links within an 800px wide div?

The links are contained within an unordered list within the 800px wide div named #top-nav

the css is this...

#top-nav ul li {
display:inline;
list-style:none;
}

with this as the current html...

<div id="top-nav">
    <ul>
    <li class="aboutus"><a href="#"> ABOUT US </a></li>
    <li class="portfolio"><a href="#"> PORTFOLIO </a></li>
    <li class="services"><a href="#"> SERVICES </a></li>
    </ul>
</div>

Also, the classes above are only used to call a css background image to replace the text. I have no margins padding or alignment set on the classes aboutus portfolio and services at the moment.

thanks for any help!

(hopefully the solution is a simple one that im overlooking from being tired at the moment.. don't you hate when that happens?)

ok i got it now.

I made a div called #nav and wrapped it around the ul

then added text-align:center to the css code for the ul.

All fixed now!

(but thanks to anyone that was going to respond.. and let me know if there is a better way to do this. thanks!)

Another way you can center something is to apply a width to it and then in also a margin of auto to the left and right. That should center the element inside of it's containing block. Something like:

#top-nav ul {width:500px; margin:0 auto}

That should center the list inside of the top-nav div. You also need a proper doctype for it to work in IE. Your solution works though so there's probably no reason to switch.