div contenitore e div interni affiancati e centrati.

[ersecchio]

Salve,
vorrei allineare centralmente dei DIV contenuti in un' altro div.
esempio:

<div id="contenitore">
<div id="modulo1" style="float:left">
</div>
<div id="modulo2" style="float:left">
</div>
<div id="modulo3"style="float:left">
</div>
</div>

se volessi che i 3 div (modulo1, modulo2, modulo3) siano affiancati e centrati all'interno del div come posso fare?

grazie

[marty89]

Ciao, prova a fare in questo modo:

#contenitore{
	margin: 0 auto;
	border: 1px solid black;
	width: 800px;
	height: 300px;
}

#modulo1{
	margin-left: 100px;
}

#modulo1, #modulo2, #modulo3{
	border:1px solid blue;
        float: left;
	width: 200px;
	height: 200px;
}

Ovviamente ho messo delle misure di esempio.

[ersecchio]

Perfetto.
la regola "margin:0 auto;" è proprio quella esatta!


tnx

[ldetomi]

Occhio che margin:0 auto; serve solo a centrare il contenitore orizzontalmente nella pagina (in pratica dici al browser: "Applica un margine pari a 0 sopra e sotto all'oggetto e invece metti un margine automatico (uguale) ai lati").
Centrare i 3 elementi al suo interno invece è una cosa diversa... La soluzione che ti è stata proposta funziona e va benissimo ma, spero che l'autore mi perdonerà la precisazione, è empirica! Nel senso che i 3 riquadri appaiono centrati perché sono uno affiancato all'altro con il primo che parte a sinistra di 100px ,e siccome ciascuno è largo 200px e il contenitore 800px... ne risulta che a destra avanzano 100px, e appaiono al centro.

Lo stesso risultato avresti allora potuto ottenerlo con i posizionamenti assoluti, che anzi..a livello concettuale sono anche più intuitivi... Il problema di queste 2 tecniche però, è che se cambi una larghezza, sei costretta a ricalibrare tutti i posizionamenti....

Magari ti va già bene così ma... credo sia stato utile sottolinearlo