Centralizar div com largura variável

Div center
  • 07 de Fev de 2014
  • 6682 Visualizações
  • 7 Comentários

Centralizar qualquer elemento html parece simples. Basta você colocar um "text-align: center" via CSS e parece que tudo estará bem! Errado!

A propriedade text-align, como o próprio nome já diz, é para alinhamentos de textos. Apesar de que, em alguns casos, você consegue alinhar outros objetos.

Para este propósito usamos então a propriedade "margin" com seu valor "auto", assim, certamente o elemento ficará centralizado, mas desde que você tenha definido uma largura para ele. Não entendeu? Go to the code! :-)

.element {
  width: 200px;
  margin: 0 auto;
}

Então, em teoria, este elemento ficará centralizado dentro do bloco onde estiver. Mas, se a largura deste elemento for variável, o mesmo não irá centralizar. Então o que fazer? Simples, usaremos da propriedade "display: table".

.element {
  display: table;
  margin: 0 auto;
}

Isso irá te ajudar bastante, mas lembre-se de realizar testes nos diversos navegadores e suas versões para não comprometer o seu projeto. Grande abraço.

TAGS: div, centralizar, largura variável, css, html, tiagomatosweb

Deixe um comentário


7 Comentários

    • Acho que com flexbox você consegue resolver isso, dá uma olhada aqui https://css-tricks.com/snippets/css/a-guide-to-flexbox/