CSS - D&R

DOMANDA

Come si centra orizzontalmente il contenitore principale di una pagina?

RISPOSTA

Se assumiamo che il div principale abbia id="container" le regole CSS essenziali per averlo largo 760 pixel e centrato sono:

body{text-align: center} /* centra in IE5.x */
div#container{ width: 760px;
margin: 0 auto; /* centra negli altri browser */
text-align: left; /* ripristina l'allineamento */ }

La centratura per i browser moderni si ottiene solo con la dichiarazione sui margini del container: il valore auto sui due margini laterali sta a significare che hanno la stessa distanza dalla finestra del browser. Internet Explorer 5.x non interpreta la dichiarazione e richiede erroneamente la dichiarazione di text-align sul body, che viene ripristinata su left nella seconda regola.