Skip to main content
adicionou 86 caracteres ao conteúdo
Fonte Link
Carlos Rocha
  • 4mil
  • 2
  • 23
  • 65

Olá! Não consigo centralizar uma ul dentro da div

CSS 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?

Olá! Não consigo centralizar uma ul dentro da 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>

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?

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?

Fonte Link
Carlos Rocha
  • 4mil
  • 2
  • 23
  • 65

Não consigo centralizar uma ul dentro da div

Olá! Não consigo centralizar uma ul dentro da 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>

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?