居中導航欄的最佳方式是什麼？

Question

居中導航欄的最佳方式是什麼？

我知道如果我添加

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

或者我可以中心如果我刪除width，並添加padding到#nav，但這些都不似乎是正確的，因爲如果我以往任何時候都需要其他項目添加到導航欄我將需要更改數字。有任何想法嗎？

這是我的代碼至今：

#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> 

Answer 1

嘗試：

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

Answer 2

您可以使用：

min-width: Apx; /* any value */ 
width: auto; 
margin:0 auto;