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

您可以使用：

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

Answer 2

尝试：

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

这个导航栏居中的最佳方法是什么？

2 个答案: