Semplicemente

Alcuni modesti suggerimenti, per far la vita meno amara.

Centrare un box con CSS

Un primo metodo per centrare un box all'interno della pagina consiste nell'assegnare ad esso una larghezza esplicita ed il valore auto per le proprietà margin-left e margin-right.

1. #box {
2. width: 300px;
3. margin-left: auto;
4. margin-right: auto;
5. }

Se siete maniaci della retro-compatibilità, come il sottoscritto, noterete che questo metodo non funziona con le versioni precedenti la 6 di IE, perché queste ultime non applicano il valore auto.

Per ottenere la centratura anche con le vecchie versioni di IE è necessario allineare il testo al centro in body (ricordandosi poi di riportare l'allineamento a sinistra nel box).

1. body { text-align: center; }
2. #box {
3. margin-left: auto;
4. margin-right: auto;
5. width: 300px;
6. text-align: left;
7. }

Un'altra soluzione è quella di utilizzare una combinazione di posizionamento assoluto e margini negativi.

1. #box {
2. position: absolute;
3. left: 50%;
4. width: 760px;
5. margin-left: -380px;
6. }

Il posizionamento assoluto rimuove il box dal flusso del documento. Successivamente lo posizioniamo in modo tale che il limite sinistro del box stia precisamente al centro della pagina (left: 50%;). A questo punto dimezziamo la larghezza del box (760/2 = 380), questo valore servirà per "riportare indietro" il box di esattamente la metà della sua lunghezza, costringendolo a stare esattamente centrato nella pagina (margin-left: -380px;).

Infine per centrare un box dimensionato in percentuale è sufficiente posizionarlo, rispetto al confine di uno dei lati, di una misura uguale alla metà della differenza tra la larghezza del box e quella della pagina (la larghezza della pagina è il 100%).

1. #box {
2. position: absolute;
3. width: 60%;
4. left: 20%;
5. }

Per approfondire fate un giro su Blue Robot.

Contribuisci alla serie di articoli Introduzione ai CSS

Tag: centrare un box, CSS, introduzione ai CSS, posizionamento

Questo articolo è stato inviato Tuesday 5 February 2008 alle 17:05 ed è archiviato nella categoria Fogli di stile, Linguaggi di marcatura. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.