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.
