Yes, I googled it, the information I found was outdated or incoherent to me.
I’m using an inline list for horizontal navigation, but I can’t center it correctly. By default, it centers the first list item.
What is the cleanest and most logical way to center it cleanly?
‘text-align:center’ (assuming your list items are actually inline boxes)
You can also use ‘text-align:center’ to center inline-blocks. That will give you the option of setting dimensions should you need them.
No luck using that, I’m afraid. And I’ll have to betray my ignorance and admit that I’m not yet aware of inline boxes, despite being on my second CSS book and halfway through VTC’s DVD.
If I show you what I’ve done, can you help me out and point out where I went wrong? It’d be a huge help.
div#uppernav
{
height:40px;
width:1000px;
font-size:1em;
border-top:solid #000 1px;
border-bottom:solid #000 1px;
background-color:#000000;
}
<div id="uppernav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="available.html">Available</a></li>
<li><a href="adoption.html">Adoption Application</a></li>
<li><a href="surrender.html">Surrender</a></li>
<li><a href="foster.html">Foster</a></li>
<li><a href="meet.html">Meet</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</div>
You need to apply ‘display:inline’ to the LI elements in order for them to flow as inline boxes- then you’ll be able to use ‘text-align:center’. As Rayzur suggests, the same property can also be used for elements with ‘display:inline-block’, since elements with ‘display:inline’ and ‘display:inline-block’ are identical in the way they’re flowed.
Oh, I had applied that to the LI elements, I just forgot to quote that part.
div#uppernav li
{
list-style-type:none;
display:inline-block;
text-align:center;
}
But that didn’t affect the change I wanted either.
The {text-align: center;} goes on the list-items’s parent, the ul.
cheers,
gary
Working from the code you posted I went ahead and progressed it a little further so you could get a grasp on things. As gary mentioned the text-align:center goes on the parent (ul) to center the inline children (li).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
#uppernav{
height:2.5em;
width:1000px;
font-size:1em;
border-top:1px solid red;
border-bottom:1px solid red;
background:#000;
}
#uppernav ul{
margin:.65em 0 0;
padding:0;
text-align:center;/*center the list items*/
}
#uppernav li{
display:inline;
margin:0 .15em;
}
#uppernav li a{
color:#FFF;
text-decoration:none;
padding:.25em;
background:#444;
}
#uppernav li a:hover{
color:#77F;
}
</style>
</head>
<body>
<div id="uppernav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="available.html">Available</a></li>
<li><a href="adoption.html">Adoption Application</a></li>
<li><a href="surrender.html">Surrender</a></li>
<li><a href="foster.html">Foster</a></li>
<li><a href="meet.html">Meet</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</div>
</body>
</html>
I really appreciate people taking the time to help. 
But looking at that, I think I was a little unclear – I’m trying to center my 1000px wide navbar on my page, not necessarily center the objects within that navbar.
Well in that case you just need to use auto margins on that parent div.
You already have a width so it will work, auto margins only work with widths.
If you don’t want the list items centered also then disregard the text-align:center on the ul.
[B]#uppernav[/B]{
height:2.5em;
[B]width:1000px;[/B]
[B]margin:0 auto;[/B]
font-size:1em;
border-top:1px solid red;
border-bottom:1px solid red;
background:#000;
}
Why bother with using a list for inline list?
I am under the impression that the default for a CSS list property is display:block whereas just using the link defaults to display:inline.
Because a menu is a list, by definition.
cheers,
gary
Using UL/LI is not necessary because you can apply the same CSS styling directly to your link.
Try this which is much cleaner:
#uppernav {
height:2.5em;
width:1000px;
margin:1em auto;
text-align:center
}
#uppernav a {
margin:0 0.10em;
background:#000; color:#fff;
padding:0.25em;
border:solid 1px;
display:inline-block;
font-size:1em
}
#uppernav a:hover {
background-color:#cfc; color:#77F
}
<div id='uppernav'>
<a href="home.html">Home</a>
<a href="about.html">About Us</a>
<a href="available.html">Available</a>
<a href="adoption.html">Adoption Application</a>
<a href="surrender.html">Surrender</a>
<a href="foster.html">Foster</a>
<a href="meet.html">Meet</a>
<a href="events.html">Events</a>
</div>
The following image shows your links at the top and mine at the bottom.
.
Wrong, the list is a display:list-item which has capabilities like display:block but they are different.
Correct
To expand on this further, an element with ‘display:list-item’ applied generates a principal box (in exactly the same way an item with ‘display:block’ does), and a marker box (when the value of either the ‘list-style’ property or ‘list-style-type’ property is not set to ‘none’). The current CSS21 specification which states, “An element with ‘display: list-item’ generates an […] optional marker box” is actually wrong, since the marker box is required in the situations I described.
A list is a list is a list. If you want to show a list, you mark it up as a list, and then your browser knows it is a list. Then you can use CSS to get it look how you want it to.
A big reason for using a list rather than a load of <a href="..."> elements separated by white space is for accessibility. If you mark it as a list, people know it is a list, rather than a string of words that happen to be links. Although you can see that it is a list, people using assistive technology generally won’t be able to, and using proper markup means they have a better chance of making sense of it.
On the <ul>, you need text-align:center;.
On the <li>, you need display:inline;.
That should do the trick!
We have all explained that already.
If you look at post#9 you will see that the OP did not explain their desired results correctly.
I gave the answer for that in post#10 and the OP has not replied back.
The answer that I gave should work for centering the navbar within the page. I realised that various people had given various solutions, which may or may not have answered the question that the OP asked or meant to ask, but I was trying to give the absolute minimum response that would achieve the desired result in the most general terms - not knocking the answer that you gave, but sometimes it’s useful to see only the essential CSS rules that demonstrate the principle as well as the specific ones that will give the result in context.
Hi Stevie,
I’m not trying to be rude or cause any unnecessary debates in this thread but setting text-align:center on the <ul> does not center the <ul>. Maybe you were thinking that it should, but it doesn’t work that way.
It centers the children (the <li>) of the <ul> when they are given an inline value. 
The OP’s original css had the <ul> wrapped in a div (which is not even needed, that #uppernav ID could have been hooked to the ul)
div#uppernav
{
height:40px;
[B]width:1000px;[/B]
font-size:1em;
border-top:solid #000 1px;
border-bottom:solid #000 1px;
background-color:#000000;
}
I don’t think I could have given anything less essential.
(I did change the height to 2.5em so it would hold together with a text zoom)
#uppernav{
height:2.5em;
[B]width:1000px;
margin:0 auto;[/B]
font-size:1em;
border-top:1px solid red;
border-bottom:1px solid red;
background:#000;
}