Why won't my navbar center?

Question

I've been trying everything to try and center this navbar, but it never does. Text align doesn't work and neither does margin: 0 auto;. I tried adding that as many times as possible to cover all spaces because it wouldn't work regardless. Here's the html:

 <div class="nav">
  <div class="container">
    <ul id="top-nav">
      <li class= ""><a class="first" href="#">UCMST</a></li>
      <li class=""><a href="#UCMST">About Us</a>
            <ul style="box-shadow: 0px 5px 10px #000;">
                <li><a href="#UCMST">Who We Are</a></li>
                <li><a href="#ContactUs">Our Testing Profile</a></li>
                <li><a href="#HonorAndAchievement">Honor and Achievement</a></li>

            </ul>

      </li>
       <li class=""><a href="#ContactUs">Contact Us</a></li>
       <li class=""><a href="#Classes">Classes</a></li>
       <li class="" style="width: 250px;"><a href="#ThunderChickens">Thunder Chickens</a></li>
   </ul>
  </div>
 </div>

And the CSS:

   .nav{
     background-color:#ffffff;
     margin-bottom: 10px;
     margin-right: auto;
     margin-left: auto;
     z-index: 1;
     text-align: center;
   }
.nav .container {
   margin: 30px auto 10px auto;
   text-align: center;
 }
#top-nav {
 margin: 10px auto 10px auto;
 padding: 0;
 list-style: none;
 height: 45px;
 width:930px;
 overflow: hidden;
 position: absolute;
 z-index: 999;
 background-color: #ffffff;
 box-shadow: 3px 3px 9px 3px #000,
    -3px 0px 9px 3px #000;

}
#top-nav:hover {  
 overflow: visible;
}

#top-nav li {
 text-align: center;
 float: left; 
 text-transform: uppercase;
 font: 1.5em  sans-serif;  
 width: 170px;
 padding-bottom: 0px;
}
#top-nav li a {
 display: block;
 text-decoration: none;
 font-weight: normal;
 text-align: center;
 color: #acacac;
 border-right: 1px solid #acacac; 
 padding-top: 12px;
 padding-bottom: 5px;
 height: 45px;
}
#top-nav li:first-child a {
 border-left: 1px solid #acacac; 
}
#top-nav > li a:hover {
 color: #ffffff;
 background: #212021;
 border: 1px solid #212021;
 height: 50px;
}
#top-nav li a.active {
 color: #ffae00;
}
#top-nav li ul {
 list-style-type: none;
 padding: 10px 0 10px 0;
 margin: 0;
 height: 150px;
 background-color: #ffffff;
}
#top-nav li ul li {
 font-size: 13px;
 padding: .3em;
 float: none;    
}
#top-nav li ul li a { 
 height: auto !important;
 border: none !important;
 padding: 3px;
}
#top-nav li ul li a:hover {
 color: #ffae00;
 background: transparent;
}

Anything you can provide is appreciated.

Answer 1

The reason has to do with the fact that your #top-nav element is using absolute positioning. The only way that I know to center an absolutely positioned element is if you know the width of the element. Since your menu is 930px, we can do something like this:

#nav-bar {
    left: 50%;
    margin-left: -465px;
}

That will basically set the left edge of the menu at 50% using the left attribute and then use a negative left margin to pull it back to be centered. One important thing to note is that this will center the menu in relation to the nearest positioned parent, or to the page if none of it's parents are positioned.

This site helped me quite a bit in understanding css positioning, and is a regular reference for me: Learn Layout

Hope that helps!

Answer 2

If you want to align absolute position div to center, you need to add left:0 and right:0. Update your top nav CSS like below.

#top-nav {
margin: 10px auto 10px auto;
padding: 0;
list-style: none;
height: 45px;
width:930px;
   overflow: hidden;
position: absolute;
z-index: 999;
  background-color: #ffffff;
box-shadow: 3px 3px 9px 3px #000,
-3px 0px 9px 3px #000;
left:0;
right:0;

}

Sample Demo

Answer 3

ROOT CAUSE: Your main container (div with class nav) does not have a size, due to it is a div it is taking 100% of width, perhaps you used margin auto it is not working because there is not margin to apply

SOLUTION: give a width to class nav.

Code: http://goo.gl/Du5kEE

Answer 4

add this to .nav

width: 930px;

Why? Because for margin: 0 auto to work you need an element with a with different then 100%.

Here is the navbar in the middle: http://jsfiddle.net/4Smvv/1/

Answer 5

Add the following to .nav css. So , you can center the nav bar.

margin-left:210px;