Alinhar horizontalmente uma div dentro de outra div.

0

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.

 

Compartilhe.