Ir para conteúdo
Fórum Script Brasil
  • 0

Menu Horizontal - Centrarlizar Texto Da <Li>


Thiago Braga

Pergunta

Olá pessoal.

Este é meu primeiro post, e to sofrendo pra fazer um menu horizontal aqui.

Seguinte, queria centralizar em CSS esse menu horizontal abaixo:

menud.png

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

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...