I can’t center an ul inside the div

Question

Hello! I can’t center an ul inside the 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>

If I do

ul.menuTopo {   
   width: 100%;
   text-align:center;
}

Instead of being 100% div father who is div menuNav, he pushes the Divs that are below her all to the left.

Another problem is the bills:

They are 1000px menuNav (100% of the div sessoes). So I have a right edge of 1 px for each li and a left wedding of 1px for the first li. So 1000 - (5+1) = 994. 994/ 5 = 198.8 px. Can put up to 195 which gives line break. How to fix this?

Answer 1

experiment with this css instead of text-align: center:

margin: auto;

Answer 2

If I understand correctly you can set a text-align: center in the div PAI of your UL and UL setar it as display: inline-block.

Answer 3

Now I understand that.

First: align:center and width: 100%(in my case not even needed why the links would already occupy the 100%) in menuNav. We want the block only in links and not in li's. So the li's may be display: inline only.

In ul, remove whitespace from inside and outside with margin:0 and 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;
}

That way, that is, apenas os link's with display:inline-block, we are able to give corpo (height and width among other box properties), if necessary to the links and não to li’s. Therefore, it is not necessary to put dimensions in the li's, only us links.

One thing I still don’t understand: the accounts don’t close:

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

The most you could get is 195px. I’m missing something here?

Answer 4

You can use

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