0

Não consigo centralizar uma lista no centro da div. Consegui deixar mais ou menos centralizado definindo um width pra ul, mas ae não fica alinhado certinho com os cantos.

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 1em;
}

#conteiner {
  width: 960px;
  margin: 0 auto;
  background: red;
}

#nav ul {
    list-style: none;
    margin: auto;
    text-align: center;
}

#nav li {
  float: left;
}

.clear {
  clear: both;
}
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="_estilos/estilo.css">

  </head>
  <body>

    <div id="conteiner">
      <div id="nav">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
          </ul>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>
 

2
  • Centralizado na horizontal, ou na vertical ? Aqui está perfeitamente alinhado na horizontal... o vc quer alinha o texto dentro do elemento?
    – hugocsl
    Commented 14/07/2019 às 16:01
  • @hugocsl quero centralizar a ul no meio da div, as li estão na posiçao certa, só quero q fique td no meio da tela
    – Jv_werneck
    Commented 14/07/2019 às 16:42

2 Respostas 2

2

Seu problema é que a UL tem 100% da largura da NAV então se vc tem dois elementos com 100% de largura eles já ficam alinhados um no outro. Vc precisa que a UL tenha apenas o tamanho do próprio conteúdo, então uma opção para isso é colocar display:inline-block nela por exemplo. Assim, além da UL ficar com o tamanho do próprio conteúdo vc pode usar text-align: center na NAV para alinha a UL no centro dela.

inserir a descrição da imagem aqui

Código da imagem acima

* {
    margin: 0px;
    padding: 0px;
  }
  
  body {
    font-size: 1em;
  }
  
  #conteiner {
    width: 960px;
    margin: 0 auto;
    background: red;
  }
  #nav {
    text-align: center;
  }
  
  #nav ul {
      list-style: none;
      display: inline-block;
      vertical-align: top;
      border: 1px solid #000;
  }
  
  #nav li {
    float: left;
  }
  
  .clear {
    clear: both;
  }
<div id="conteiner">
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

2

Você pode usar flexbox para poder centralizar o ul. Coloque-o display: flex no elemento pai do ul que seria o #nav. Assim você vai definir o elemento pai para que os seus filhos sejam flexível. Depois é só adicionar justify-content: center para que você possa alinhar os elementos filhos flexível no centro do elemento pai.

#nav {
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
    
    * {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 1em;
}

#conteiner {
  width: 960px;
  margin: 0 auto;
  background: red;
}

#nav {
  display: flex;
  justify-content: center;
}

#nav ul {
    list-style: none;
    margin: auto;
    text-align: center;
}

#nav li {
  float: left;
}

.clear {
  clear: both;
}

    </style>
  </head>
  <body>

    <div id="conteiner">
      <div id="nav">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
          </ul>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

3
  • 2
    poderia explicar o que foi feito? a resposta parece boa mas só "adicione isso" não ajuda quem precisa entender como resolver o problema Commented 14/07/2019 às 17:45
  • 1
    Sim, vou editar a resposta! Commented 14/07/2019 às 20:23
  • Simples e objetivo. Excelente resposta. Commented 18/07/2020 às 20:45

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 .