Alan Nunes Cerqueira: Como centralizar divs dentro de div?

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>

.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="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:

Alan Nunes Cerqueira