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>
Try:
#nav {
text-align: center;
}
#nav ul li {
display: inline-block;
}