Olá! Não consigo centralizar uma ul dentro da div CSS
.menu {
clear:both;
position:relative;
width: 100%;
}
.sessoes {
width:1000px;
margin: 0 auto;
}
.menuNav {
width:100%;
text-align:center;
background-color:#3E4095;
}
ul.menuTopo {
text-align:center;
}
ul.menuTopo li {
height:50px;
border-left: #005E9C 1px solid;
}
ul.menuTopo li a {
display:inline-block;
height:50px;
line-height:50px;
vertical-align:middle;
text-align:center;
color: #FFF;
background-color:#3E4095;
}
ul.menuTopo li a:hover {
color: #FFF;
background-color:#CCC;
}
HTML
<div class="menu">
<div class="sessoes">
<nav class="menuNav">
<a class="menuFechar"><img src="../_img/btn-close.png" width="30px;" title="Abrir Menu" /></a>
<ul class="menuTopo">
<li><a href="principal.php" title="Principal">Principal</a>
<li><a href="principal.php?acao=cadastrar" title="Cadastrar">Cadastrar</a>
<li><a href="principal.php?acao=editar" title="Editar">Editar</a>
<li><a href="principal.php?acao=pedidos" title="Pedidos">Pedidos</a>
<li><a href="emails.php?acao=listar" title="E-mails">E-mails</a>
</ul>
</nav>
</div>
</div>
Se eu fizer
ul.menuTopo {
width: 100%;
text-align:center;
}
Ao invés de ficar a 100% da div pai que é a div menuNav, ele empurra as divs que estão abaixo dela todas para a esquerda.
Outro problema são as contas:
São 1000px de menuNav (100% da div sessoes). Então tenho uma borda direita de 1 px para cada li e uma boda esquerda de 1px para a primeira li. Logo, são 1000 - (5+1) = 994. 994/ 5 = 198.8 px. Pode colocar até 195 que dá quebra de linha. Como concertar isso?