Search code examples
csscenternav

What is the best way to center this nav bar?


What is the best way to center this nav bar?

I know I can center if I add

#nav ul {
  margin:0 auto; 
  width:720px;
}

or if I remove width and add padding to #nav, but none of these seems right because If I ever need to add another item to the nav bar I will need to change the numbers. any ideas?

this is the code I have so far:

#nav { 
   background:url(../images/nav-background.jpg) repeat-x;
   height:50px;
   width:960px;
   text-transform:uppercase;
   position:fixed;
}

#nav ul li {
   display: table-cell;
   vertical-align:top;
   line-height:3.8em;
}


#nav li {
   display:inline;
   font-family: 'Philosopher', sans-serif;
   font-size:0.9em; 
   letter-spacing:0.1em;
   font-weight:700;
}

#nav li a { 
   color:#848484;
   text-decoration:none;
   padding:5px 8px;
}

#nav li a:hover {
   color:#fff;
   background-color:#636566;
}

.nav-separator {
   padding:0 2px;
}
#nav .logo a:hover {
  background:none;
}

  <div id="nav">
        <ul>
            <li><a href="lourenco.php">Lourenço</a><img class="nav-separator" src="images/nav-separator.jpg" /></li>
            <li><a href="areas-de-atuacao.php">Áreas de Atuação</a></li>
            <li class="logo"><a href="index.php"><img src="images/logo-lourenco-advogados.png" /></a></li>
            <li><a href="clientes.php">Clientes</a><img class="nav-separator" src="images/nav-separator.jpg" /></li>
            <li><a href="noticias.php">Notícias</a><img class="nav-separator" src="images/nav-separator.jpg" /></li>
            <li><a href="contato.php">Contato</a></li>
        </ul>
  </div>

Solution

  • Try:

     #nav {
        text-align: center;
     }    
    #nav ul li {
        display: inline-block;
     }