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>