Centrare un div verticalmente ed orizzontalmente
Tante volte mi è capitato di pormi questa domanda mentre scrivevo pagine e sapevo che la risposta doveva essere in javascript. Come avrete ben intuito, se siete arrivati qui cercando su google, le risposte valide non sono molte e in italiano men che meno. Via semplice html è impossibile, via php non esiste (logicamente) una variabile passabile con la grandezza del monitor o del client, l’unica via è tramite javascript dove sono presenti alcune interessanti funzioni…
Quello che il codice che scriverò qui sotto farà, non è nient’altro che centrare un div verticalmente ed orizzontalmente ed in caso di resize della finestra lo stesso si autocentrerà nuovamente. Direi che è il risultato che di solito si cerca di avere no? Allora iniziamo!
Cominciamo con il creare due div, il secondo dentro il primo. A quello più esterno assegneremo come id ad esempio il nome “center”, all’altro invece ho messo un semplice bordino nero e, cosa molto importante, la grandezza che avrà il div centrato, in questo caso 362 x 167 pixel.
<div id="center"> <div style="border:1px solid #000;width:362px;height:167px">Prova</div> </div>
Eliminiamo il margine di pagina dal div contenitore (il nostro “center”) tramite il css
body { margin:0 auto; }
A questo punto passiamo al cuore della soluzione in javascript. La prima funzione non farà altro che usare le funzioni window.innerWidth/Height o document.documentElement.clientWidth/Height per prendere prendere la grandezza del client e dopo aver sottratto la grandezza impostata prima divide i due dati per 2 e li pone come padding del div esterno, in modo da centrare quello interno. La seconda funziona invece è solo di rimando alla prima nel caso in cui la finestra venga ridimensionata.
<script type="text/javascript"> function centerDiv(){ if(typeof(window.innerWidth) == 'number') { document.getElementById("center").style.paddingLeft = (((window.innerWidth)-362)/2)+"px"; document.getElementById("center").style.paddingTop = (((window.innerHeight)-167)/2)+"px"; } else { document.getElementById("center").style.paddingLeft = (((document.documentElement.clientWidth)-362)/2)+"px"; document.getElementById("center").style.paddingTop = (((document.documentElement.clientHeight)-167)/2)+"px"; } } window.onresize = function (){ centerDiv(); } </script>
L’ultima cosa da fare è caricare la funzione centerDiv() al caricamento del body della pagina e per farlo utilizzeremo l’onload del body.
<body onload="centerDiv();">
Ed ecco infine il codice completo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div Centrato</title> <style type="text/css"> <!-- body { margin:0 auto; } --> </style> <script type="text/javascript"> function centerDiv(){ if(typeof(window.innerWidth) == 'number') { document.getElementById("center").style.paddingLeft = (((window.innerWidth)-362)/2)+"px"; document.getElementById("center").style.paddingTop = (((window.innerHeight)-167)/2)+"px"; } else { document.getElementById("center").style.paddingLeft = (((document.documentElement.clientWidth)-362)/2)+"px"; document.getElementById("center").style.paddingTop = (((document.documentElement.clientHeight)-167)/2)+"px"; } } window.onresize = function (){ centerDiv(); } </script> </head> <body onload="centerDiv();"> <div id="center" style="padding-top:100px;"> <div style="background-color:#900;width:362px;height:167px">Prova</div> </div> </body> </html>Centrare un div verticalmente ed orizzontalmente,
Related Images:
Category: Informatica
About the Author (Author Profile)
Comments (2)
Trackback URL | Comments RSS Feed
Sites That Link to this Post
- Pillole di jQuery – Centrare un div | -=[Il Chiaroscuro]=- | 10 marzo 2012
Grazie mille!!! Funziona alla grande… utilissimo!