Skip to main content
removeu 2 caracteres do conteúdo
Fonte Link
Laércio Lopes
  • 4,4mil
  • 3
  • 29
  • 52

Buscando boas práticas em HTML, qual a melhor forma de centralizar?

Vejo que consigo centralizar o menu de uma página por ambas as opções, porém fico na duvida de qual a melhor forma e também de qual é a forma correta ao invés de apenas usar uma que funcione sendo errada em alguns casos.

Vejamos o seguinte código:

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px; }

.menu { list-style: none;
        margin: auto;
        width: 200px; }

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Só consigo centralizar o menu por margin: auto; quando defino uma largura da classe menu e isso em alguns casos pode me fazer ter problemas quando os itens excedem esse tamanho, basta mudar o width: 200px; para width: 100px; que os itens ficam sobrepondo outros.

Já quando defino a classe menu sem width posso centralizar o menu definindo um text-align: center; no seletor da tag superior, que no caso é o id #container. Fazendo isso eu consigo resolver o problema da quantidade de itens da lista que pode mudar e até ficar com tamanhos diferentes dependendo das modificações que precise fazer, mas ainda assim fico me perguntando se essa é a forma correta de fazer o alinhamento no centro.

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px;
             text-align: center; } /* adicionado */

.menu { list-style: none;}
/* removido width: 200px e margin: auto */

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Buscando boas práticas em HTML, qual a melhor forma de centralizar?

Vejo que consigo centralizar o menu de uma página por ambas as opções, porém fico na duvida de qual a melhor forma e também de qual é a forma correta ao invés de apenas usar uma que funcione sendo errada em alguns casos.

Vejamos o seguinte código:

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px; }

.menu { list-style: none;
        margin: auto;
        width: 200px; }

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Só consigo centralizar o menu por margin: auto; quando defino uma largura da classe menu e isso em alguns casos pode me fazer ter problemas quando os itens excedem esse tamanho, basta mudar o width: 200px; para width: 100px; que os itens ficam sobrepondo outros.

Já quando defino a classe menu sem width posso centralizar o menu definindo um text-align: center; no seletor da tag superior, que no caso é o id #container. Fazendo isso eu consigo resolver o problema da quantidade de itens da lista que pode mudar e até ficar com tamanhos diferentes dependendo das modificações que precise fazer, mas ainda assim fico me perguntando se essa é a forma correta de fazer o alinhamento no centro.

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px;
             text-align: center; } /* adicionado */

.menu { list-style: none;}
/* removido width: 200px e margin: auto */

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Buscando boas práticas em HTML, qual a melhor forma de centralizar?

Vejo que consigo centralizar o menu de uma página por ambas as opções, porém fico na duvida de qual a melhor forma e também de qual é a forma correta ao invés de apenas usar uma que funcione sendo errada em alguns casos.

Vejamos o seguinte código:

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px; }

.menu { list-style: none;
        margin: auto;
        width: 200px; }

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Só consigo centralizar o menu por margin: auto; quando defino uma largura da classe menu e isso em alguns casos pode me fazer ter problemas quando os itens excedem esse tamanho, basta mudar o width: 200px; para width: 100px; que os itens ficam sobrepondo outros.

Já quando defino a classe menu sem width posso centralizar o menu definindo um text-align: center; no seletor da tag superior, que no caso é o id #container. Fazendo isso eu consigo resolver o problema da quantidade de itens da lista que pode mudar e até ficar com tamanhos diferentes dependendo das modificações que precise fazer, mas ainda assim fico me perguntando se essa é a forma correta de fazer o alinhamento no centro.

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px;
         text-align: center; } /* adicionado */

.menu { list-style: none;}
/* removido width: 200px e margin: auto */

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Fonte Link
Laércio Lopes
  • 4,4mil
  • 3
  • 29
  • 52

Melhor centralizar por margin:auto ou text-align:center?

Buscando boas práticas em HTML, qual a melhor forma de centralizar?

Vejo que consigo centralizar o menu de uma página por ambas as opções, porém fico na duvida de qual a melhor forma e também de qual é a forma correta ao invés de apenas usar uma que funcione sendo errada em alguns casos.

Vejamos o seguinte código:

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px; }

.menu { list-style: none;
        margin: auto;
        width: 200px; }

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Só consigo centralizar o menu por margin: auto; quando defino uma largura da classe menu e isso em alguns casos pode me fazer ter problemas quando os itens excedem esse tamanho, basta mudar o width: 200px; para width: 100px; que os itens ficam sobrepondo outros.

Já quando defino a classe menu sem width posso centralizar o menu definindo um text-align: center; no seletor da tag superior, que no caso é o id #container. Fazendo isso eu consigo resolver o problema da quantidade de itens da lista que pode mudar e até ficar com tamanhos diferentes dependendo das modificações que precise fazer, mas ainda assim fico me perguntando se essa é a forma correta de fazer o alinhamento no centro.

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px;
             text-align: center; } /* adicionado */

.menu { list-style: none;}
/* removido width: 200px e margin: auto */

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
    <li class="menu-item"><a href="">Home</a></li>
    <li class="menu-item"><a href="">Work</a></li>
    <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>