Centralizar divs dentro de div
A seguir foi implementado um código que permite centralizar div's dentro de div, situação bastante utilizada no dia a dia.
<html>
<head>
<style type="text/css">
.conteudo{
background-color: #eee;
border: 1px solid #ddd;
text-align: center;
}
.divCentralizada{
margin: 0 auto;
background-color: #f44;
padding: 0 50px;
margin: 0 20px;
display: inline;
}
</style>
</head>
<body>
<div class="conteudo">
<div class="divCentralizada">Caixa
1</div>
<div class="divCentralizada">Caixa
2</div>
<div class="divCentralizada">Caixa
3</div>
</div>
</body>
</html>
Comentando o código utilizado:
.conteudo{
background-color: #eee; /* Definindo a cor da div */
border: 1px solid #ddd; /* Difinindo a cor da borda da div */
text-align: center; /* Alinhando conteudo da div */
}
.divCentralizada{
margin: 0 auto; /* Definido as margem top e botton como 0 e definindo
automaticamente as margens left e right */
background-color: #f44;
/* Definindo a cor da div */
padding: 0 50px; /* define um valor para os espaçamentos entre o conteúdo
e as bordas da div */
margin: 0 20px; /* define um valor para espessura das margens da div */
display: inline; /* Define
a maneira como o elemento deve ser renderizado (em linha) */
}
A seguir a imagem do resultado final:
