Olá pessoal. Este é meu primeiro post, e to sofrendo pra fazer um menu horizontal aqui. Seguinte, queria centralizar em CSS esse menu horizontal abaixo: Porém, não to conseguindo centralizar os textos Home, Serviços, etc. dentro dos "blocos" do menu. Meu código HTML tá assim: <ul class="menu">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="servicos.php">Serviços</a></li>
<li><a href="clientes.php">Parcerias e Clientes</a></li>
<li><a href="equipe.php">Nossa Equipe</a></li>
<li><a href="galeria.php">Galeria</a></li>
<li style="border: 0;"><a href="contato.php">Contato</a></li>
</ul>
e o código CSS:
.menu{
padding: 0;
line-height: 42px;
width: 100%;
display: block;
}
.menu li{
width: 155px; /* 950px/6 = 158,33px - foi o valor que ficou mais correto dentro da div */
list-style: none;
display: inline-table;
border-right: 1px inset #cccccc;
padding: 9px 0 8px; /* esse padding eu usei para ajustar a borda que divide os links do menu dentro da div, tem uma distância de 1px no top e no bottom da div */
text-align: center; /* e esse text-align não funcionou =/ */
}
.menu li a{
float: left;
display: block; /* na verdade, não sei pra que serve esse */
color: rgb(51,51,51);
text-decoration: none;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
cursor: pointer;
}
.menu li a:hover{
color: rgb(161,161,161);
}
.menu li a.active, .menu li a.active:hover{
color: rgb(51,51,51);
} Tentei utilizar padding e margin dentro do .menu li para centralizar, mas não fui feliz rsrs. Bem, se souberem outra magia ae rsrs, porque minhas gambiarras não deram certo... ¬¬. Obrigado a quem ajudar. Abraços...
