Come porre un box al centro della pagina
Porre un box al centro della pagina è molto semplice, basta sapere come fare. In questo articolo vedremo un esempio di come porre al centro della pagina, sia in verticale sia in orizzontale, un box largo 350px e alto 200px.
Lavorare su tutta l'area della pagina
Per lavorare su tutta l'area della pagina, è necessario annullare i margini della pagina e impostare a 100% l'altezza del tag BODY e dunque anche del tag HTML:
body,html { height:100%;margin:0 }
E' necessario impostare height:100% anche per il tag HTML poiché la regola height:100% ha come riferimento (100% rispetto a cosa?) l'altezza del tag parent (quello che contiene il tag a cui ci si riferisce) che è appunto il tag HTML.
Centrare il box in due passi
Il box che verrà centrato sarà identificato dal selettore #box.
Innanzitutto definiamo la dimensione del box:
#box {
width:350px; height:200px;
[...]
}
La dimensione è stata definita in pixel, ma poteva tranquillamente essere definita in unità percentuali.
Quando si stabilisce l'altezza di un elemento con la proprietà height, è bene non inserire contenuti che forzino l'altezza stabilita, poiché si perderebbe l'allineamento veriticale e poiché i diversi browser non si comportano tutti nello stesso modo e risultati potrebbero non essere gradevoli. Del resto, se si imposta l'altezza di un box significa che si conosce l'altezza occupata dai contenuti.
Impostate le dimensioni del box, è possibile centrarlo in due soli passi.
Primo passo: Porre l'angolo superiore sinistro del box al centro della pagina
Il primo passo consiste nel posizionare il box in modo tale che l'angolo superiore sinistro si trovi al centro della pagina. Ciò e molto semplice e può essere realizzato attraverso il posizionamento assoluto:
#box {
[...]
position:absolute;top:50%;left:50%;
[...]
}
Secondo passo: regolare i margin
A questo punto il box è posizionato in maniera tale da avere l'angolo superiore sinistro esattamente al centro della pagina. Se adesso si impostano il margine superiore e il margine sinistro su valori negativi, il box si sposterà verso l'alto e verso sinistra. Se il margine superiore è pari a metà dell'altezza del box (-100px) e il margine sinistro è pari a meta della larghezza del box (-175px), essendo tali valori relative all'angolo superiore sinistro, il box sarà al centro della pagina:
#box {
[...]
margin:-100px 0 0 -175px;
}
Il metodo funziona anche se altezza e/o larghezza sono fissati in unità percentuali.
Il codice CSS definitivo è dunque il seguente:
body,html { height:100%;margin:0 }
#box {
width:350px; height:200px;
position:absolute;top:50%;left:50%;
margin:-100px 0 0 -175px;
}
Compatibilità coi browser
Questo metodo è stato testato con IE5.5 e IE6, Mozilla, Opera 6.0 e Opera 7 (Beta). Purtroppo l'allineamento verticale non funziona con Konqueror 3 e il box finisce al di fuori dello schermo. Qualora riuscissi a trovare una soluzione la segnalerò in questo articolo, fino ad allora sarebbe bene usare tecniche di sniffing per nascondere il codice a tale browser.
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
