Div al centro della finestra del browser
- Gennaio 11, 2010
- by
- Donatantonio
Può risultare molto utile posizionare un div o un blocco al centro della pagina web. Pensiamo ad esempio all’esigenza di creare un piccolo sito web che si vada a posizionare al centro della finestra del browser.
La soluzione proposta raggiunge questo scopo innanzitutto fissando in pixel la dimensione del nostro div e con l’aiuto di poche linee di codice javascript e css posizionandolo al centro verticalmente e orizzontalmente.
Ecco il codice completo (nel nostro esempio il div ha dimensione 400 x 400):
<html>
<head>
<title>DIV al centro della pagina</title>
<style type="text/css">
<!--
.blocco{
background-color:#00FFFF;
height:400px;
width:400px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
// Calcolo l'altezza in pixel della finestra del browser
var h;
if( typeof( window.innerHeight ) == 'number' ) {
// Non - Internet Explorer
h = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
// Per Internet Explorer 6
h = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
// Per altri Internet Explorer
h = document.body.clientHeight;
}
// Calcolo il margine superiore per posizionare il div
if(h>400){
h=(h-400)/2;
}else{
// Per evitare un errore di divisione per 0
h=0;
}
// Creo quindi il DIV
document.write("<div style='margin-top:"+h+"px;' class='blocco'>");
</script>
Div al centro della pagina!<br/>
Qui posso aggiungere i contenuti al DIV...
</div>
</body>
</html>
Analizzando brevemente il codice proposto si può notare come il CSS svolga essenzialmente il ruolo di allineamento del div orizzontalmente, successivamente Javascript calcolando l’altezza della finestra del browser (window.innerHeight), posiziona il div al centro verticalmente, impostando un margine superiore al div.
N.B. Questa soluzione non è da considerarsi l’unica per raggiungere l’obiettivo di centrare un div.
1 Comment
Div al centro che segue lo scrolling | Fabio Donatantonio
18th Lug 2011 - 23:50[…] un articolo di un pò di tempo fa, si è visto come centrare con CSS/Javascript un div al centro della pagina. […]