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.
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).
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.
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.
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)