Jump to content


thibraga06

Member Since 08/05/2011
Offline Last Active 03/09/2018, 07:44
-----

Topics I've Started

Menu Horizontal - Centrarlizar Texto Da <Li>

08/05/2011, 02:22

Olá pessoal.
Este é meu primeiro post, e to sofrendo pra fazer um menu horizontal aqui.
Seguinte, queria centralizar em CSS esse menu horizontal abaixo:

Posted Image

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, pq minhas gambiarras não deram certo... ¬¬.
Obrigado a quem ajudar. Abraços

IPB Skin By Virteq