I can not center an ul inside the div

Question

I can not center an ul inside the div

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-1 votes)

0

Hello! I can not centralize an ul inside the div CSS

.menu{clear:both;position:relative;width:100%;}.sessoes{width:1000px;margin:0auto;}.menuNav{width:100%;text-align:center;background-color:#3E4095;}ul.menuTopo{text-align:center;}ul.menuTopoli{height:50px;border-left:#005E9C1pxsolid;}ul.menuTopolia{display:inline-block;height:50px;line-height:50px;vertical-align:middle;text-align:center;color:#FFF;background-color:#3E4095;}ul.menuTopolia:hover{color:#FFF;background-color:#CCC;}

HTML

<divclass="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% of the parent div that is the div menuNav, it pushes the divs that are below it all to the left.

Another problem is the accounts:

There are 1000px of menuNav (100% of divesessoes). So I have a right border of 1 px for each li and a boda left from 1px for the first li. So, it's 1000 - (5 + 1) = 994. 994/5 = 198.8px. Can put up to 195 that gives line break. How do I arrange this?

css css3

asked by anonymous 04.05.2016 / 22:50

4 answers

Run script js when trying to close the window .js files are not loaded after ActionLink loads PartialView

score 1 · Answer 1

1

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

margin: auto;

04.05.2016 / 22:53

score 0 · Answer 2

0

If you understand correctly you can set a text-align: center in the PAI div of your UL and set it to UL:

05.05.2016 / 03:21

score 0 · Answer 3

Now I understand that.

First: align:center and width: 100% (in my case, I did not even need to know why links would already occupy 100%) in menuNav . We want block only on links and not li's . Then,% w of% can be li's only.

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

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

One thing I still do not understand: accounts do not close:

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

The maximum you can get is 195px. Am I missing anything?

score -1 · Answer 4

-1

You can use

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

13.03.2018 / 16:42