1

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>

1 Resposta 1

1

De acordo com a W3C

The CSS margin properties are used to generate space around elements. Segue o link

Ou seja, a função da propriedade "margin" é definir espaço em volta dos elementos.

Já a propriedade "text-align":

The text-align property specifies the horizontal alignment of text in an element. Segue o link

Resumindo, serve para alinhar texto horizontalmente.

Boas praticas é utilizar um recurso de acordo com sua função. Se teu objetivo é centralizar texto. Deve utilizar "text-algin". Caso contrario, utilize "margin".

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 .