Dias atrás me perguntei: Como faço para centralizar horizontalmente uma div dentro de outra div apenas com CSS? Será que é possível realizar isto de maneira simples?
Vamos supor 2 cenários:
A div exterior tem 100%:
<div id = style “exterior” = “width: 100%”>
<div id = “interior”> Foo foo </ div>
</ div>
Você pode aplicar esse CSS para a div interna:
#inner {
width: 50%;
margin: 0 auto;
}
Claro, você não tem que definir a largura para 50%. Qualquer largura menor do que a div contendo irá funcionar. A margin: 0 auto é o que faz a centralização real.
Mas aqui vai uma dica. Se você está trabalhando para IE8 +, pode ser melhor ter isso em vez disso:
#inner {
display: table;
margin: 0 auto;
}
Isso fará com que o centro elemento interno horizontalmente e funciona sem definir uma largura específica. Assim você poderá alinhar todo o seu conteúdo interno.
Bacana não é mesmo? 🙂
Um abraço a todos.
