Bookmark and Share
 DIV centrato nella pagina

Sviluppo Siti Simone lunedì 25 giugno 2007 alle 11:19
  • Potresti trovare interessanti anche gli articoli correlati che trovi nel box sulla destra!
  • Resta sempre aggiornato grazie al mio feed RSS.

Avevo ancora una scarsa conoscenza di CSS (in tutte le sue versioni) e litigavo continuamente cercando il modo di centrare correttamente un DIV all’interno della pagina. Poteva essere semplicemente un blocco per l’autenticazione o anche per la centratura orizzontale completa del sito in costruzione. Ora ho capito il meccanismo e le regole di CSS e il tutto risulta abbastanza intuitivo.

Metto a disposizione il codice per risolvere il problema per tutti coloro che, alle prime armi con CSS siano in cerca di risolvere questo dilemma…

Div centrato verticalmente ed orizzontalmente nella pagina

#container {
width: Xpx;
height: Ypx;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(X/2)px;
margin-left: -(Y/2)px;
}
X è la larghezza del vostro DIV, mentre Y rappresenta l’altezza.

Una volta che avete creato il DIV con le prime tre (3) istruzioni, lo posizionate dal top e dal bordo sinistro della pagina (left) al 50% della finestra. Questo sposta il vertice alto/sinistro nell’esatto centro, posizionando così il blocco non esattamente nel centro, ma, appunto, sfasato sulla destra e sul fondo.

Regoliamo la posizione impostando un margine negativo al blocco per “tirarlo” a posto. Con una dimensione di X/2 (X mezzi) e Y/2 (Y mezzi), riusciamo così a farsi che il centro del nostro DIV sia esattamente al centro della nostra pagina.

E ora…continuate a divertirvi con i CSS!!!

Bookmark and Share

Commenti a “DIV centrato nella pagina”

Lascia un commento

Ti ricordo che è sempre necessario trascrivere le due parole che leggi nel box rosso. È una misura antispam.