Publicado em 26 de jul.

[Resolvido] Centralizar divs independente da quantidade

Bom dia,

Tenho uma div #conteudo de 980px, e dentro dela terá outras divs de 200px...quero deixar essas divs de 200px centralizadas, podem ter duas divs, ou tres divs , ou quatro divs....nao importa a quantidade de divs...preciso delas centralizadas...

Alguma dica?

Valeu.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 26 de jul.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<style>
.conteudo {
width: 980px;
margin: 0 auto;
background: pink;

text-align: center; / <<<< /
}

.caixas {
display: inline-block;
width: 200px;
height: 200px;
background: gray;

text-align: left; / <<<</
margin: 0 10px; / espaçamento entre elas /
}

</style>
</head>

<body>
<div class="conteudo">
<div class="caixas"></div>
<div class="caixas"></div>
</div>
</body>
</html>

weslleysolo· 26 de jul.

André...obrigado.

Eu tinha feito algo parecido, devia ter postado meu codigo...vacilei no display: inline-block;...no lugar eu coloquei um float.

Obrigado.

pequeno detalhe:

No IE7 deu pau..então pra corrigir, precisa de um ajuste, assim:

.caixas {
 display: inline-block;

display:inline; / IE7 */ zoom:1;/ IE7 /

 width: 200px;
 height: 200px;
 background: gray;
 text-align: left; /* <<<<*/
 margin: 0 10px; /* espaçamento entre elas */
}

André do Vale· 26 de jul.

IE7 é osso hehe. Como eu só trabalho com IE8+ então nem me liguei nesse detalhe. :thumbsup: