Trouble with list navigation

[jlines]

I am having trouble centering my links using list navigation. They are now left justified, an I would like them centered. I have a container that is 950px wide, can anyone tell me what is missing to center the links within the container div? text-align: center; does not seem to work for me.

Live Example Here

html

<div id="nav_container">
<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a></li>
  <li><a href="">Products</a> </li>
  <li><a href="">Contact</a></li>
</ul>
</div>

css

#nav_container {
width: 950px;

position: relative;
}
#nav_container ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
height: 34px;
}
#nav_container ul li {
display: block;
position: relative;
float: left;
}
#nav_container li ul {
display: none;
}
#nav_container ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
#nav_container ul li a:hover { background: #617F8A; }

Any help would be greatly appreciated. Thanks!

 

[ronaldroe]

I'm assuming you're trying to center the text of the individual links, and not the whole menu (I can't see the page, I'm on a gov't computer). If that's the case, your problem is that your li do not have a set width for the browser to center the text within.

On another note, you could clean up your code a good bit by losing the container div, and actually putting that id="menu" in the ul to work. Just add the width attribute to it. Also, you can cut out some of the extra selectors. That'll cut down on some of your confusion:

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a></li>
  <li><a href="">Products</a> </li>
  <li><a href="">Contact</a></li>
</ul>

#menu {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
height: 34px;
width: 950px;
}
#menu li {
display: block;
position: relative;
float: left;
}
#menu li ul { 
display: none;
}
#menu a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
#menu a:hover { background: #617F8A; }

 

[Nathan Joshua]

You can always try a different route. Personally I found list navs work much better when it's a vertical navigation menu.

A possible solution: Try putting the UL's inside a paragraph tag and adding this to the CSS.

#nav_container p{
text-align:center;
}

 

[ronaldroe]

A possible solution: Try putting the UL's inside a paragraph tag and adding this to the CSS.

#nav_container p{
text-align:center;
}

So, we should add yet another wrapper? Not to mention, it wouldn't work. It has nothing to do with what you wrap it in.