Centralizar div com largura variável

Div center
  • 07 de Fev de 2014
  • 5736 Visualizações
  • 6 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


6 Comentários

    • Muito obrigado.. Estava precisando muito disso..

      • Awesome!!! :D

    • Nossa, muito obrigada, estava com este problema a muito tempo, e nao conseguia alinhar de maneira nenhuma a div q tinha valor variável e também estava dentro de outra div variável....VALEU!

      • Olá Patrícia,

        Fico feliz em saber que te ajudei de alguma forma! :-) Apareça sempre que possível.

    • Você simplificou algo que eu tenho procurado faz semanas! Obrigado.

      • Olá Rodrigo, este é o lema do meu blog! Obrigado e volte sempre!