DIV centrato nella pagina
Sviluppo Siti Monday 25 June 2007 alle 11:19
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!!!
Buon 2012 anche a te carissimo Puffas
Un abbraccio
Honz
29 February 2008 alle 14:06
ERRORE!!!
margin-top: -(X/2)px;
margin-left: -(Y/2)px;
ESATTO…
margin-top: -(Y/2)px;
margin-left: -(X/2)px;
8 March 2008 alle 14:35
Effettivamente, scritto sovrappensiero errando le variabili del posizionamento! Grazie!
15 May 2008 alle 11:41
adesso comincio a masticarne di div :O) un’altra lacuna colmata…grazie
20 August 2008 alle 20:57
grazie mille
mi hai risparmiato una serata di scleri….
22 January 2009 alle 16:42
Occhio però, le espressioni nei CSS non sono mai consigliabili. Vi invito a leggere questo paragrafo:
http://developer.yahoo.com/performance/rules.html#css_expressions
23 January 2009 alle 1:09
Ma chiaramente io non parlavo di inserire le espressioni nel documento CSS, bensì i valori dimezzati. Insomma, se X valeva 50, al posto di (X/2) bisogna scrivere 25… Facile, no?
30 April 2010 alle 16:58
Grazie 1000 mi hai risparmiato un cazziatone infinito!!!
3 May 2010 alle 19:34
Bene, mi fa piacere!!!
5 September 2010 alle 23:08
Salve,
riscontro un problema piuttosto fastidioso e di cui non riesco a trovar soluzione. Se il div, per qualsivoglia motivo*, è più grande della finestra del browser, la parte – più o meno piccola – superiore diviene non visibile e tagliata fuori anche dalle barre di navigazione.
Qualche suggerimento?
(*) ad esempio un monitor piccolo e/o una risoluzione video troppo alta e/o troppe “barre” installate sul browser…
5 September 2010 alle 23:18
Aggiungo,
ho trovato questa interessante soluzione a questo sito: http://stylizedweb.com/2008/02/01/vertical-align-div/
Di seguito, per praticità, il codice:
Content
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
margin:0px auto;
padding:0;
}
div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}
div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
}
/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
html, body {
height: auto;
}
/* end hack */
/* ]]> */
Ovviamente il CSS va messo in cima, ma credo non siano cose che vadano sottolineate.
A presto,
E.
2 February 2011 alle 19:01
Perfetto!Non sapete quanto mi avete aiutato! Grazie mille