0

Olá! Não consigo centralizar uma ul dentro da div inserir a descrição da imagem aqui 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?

4 Respostas 4

1

experimente com esse css ao invés de text-align: center:

margin: auto;
3
  • onde? Em qual estilo? Commented 4/05/2016 às 20:54
  • na ul que vc quer centralizar Commented 4/05/2016 às 20:55
  • margin: auto; (ou margin:0 auto;) width:100%; =>Toda a UL foi para direrta. E, margin: auto; => nada ocorreu e permaneceu descentralizado no mesmo lugar. Coloquei uma imagem na pergunta. Commented 4/05/2016 às 21:35
0

Se eu entendi direito vc pode setar um text-align: center na div PAI da sua UL e na UL setar ela como display: inline-block.

1
  • align: center já estava. Adicionei display: inline-block e continuou na mesma forma. Commented 5/05/2016 às 10:53
0

Agora entendi isso.

Primeiro: align:center e width: 100%(no meu caso nem precisava por que os links já ocupariam os 100%) na menuNav. Queremos o block apenas nos links e não nas li's. Então, as li's podem ser display: inline apenas.

Na ul, retire os espaços em branco de dentro e de fora com margin:0 e padding: 0

.menuNav {
    width: 100%;
    text-align: center;
    background-color: #3E4095;
}
ul.menuTopo {
    text-align: center;
    margin: 0;
    padding: 0;
}
ul.menuTopo li {
    border-left: #005E9C 1px solid;
    display: inline;
}
ul.menuTopo li:last-child {
    border-right: #005E9C 1px solid;
}
ul.menuTopo li a {
    display: inline-block;
    width: 195px;
    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;
}

Dessa forma, ou seja, apenas os link's com display:inline-block, somos capazes de dar corpo (altura e largura dentre outras propriedades box), se necessário aos links e não às li's. Sendo assim, não é necessário colocar dimensões nas li's, apenas nos links.

Só uma coisa ainda não entendi: as contas não fecham:

1000px - 6px(bordas) = 994px.
994/5 = 198,8

No máximo que deu para chegar é 195px. Estou errando em alguma coisa?

-1

Você pode usar

ul.menuTopo {
   width: fit-content;
   margin: 0 auto;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .