Crea sito

Pillole di jQuery – Centrare un div

| 10 marzo 2012 | 0 Comments

JQuery LogoNel 2010 scrissi un articolo in cui mostravo come centrare un div in posizione assoluta all’interno di una pagina. Mi pare giunto il momento di fare un aggiornamento e spiegare come farlo con jQuery. La soluzione è molto meno complicata della precedente, anche se effettivamente è la stessa identica cosa (come cita il motto “La libreria JavaScript con cui scrivi meno e fai di più”). Naturalmente gestisce anche il redimensionamento del browser.
Iniziamo a creare un div nel body della nostra pagina

</pre>
<div id="center" style="background-color: #900; width: 362px; height: 167px;">Prova</div>
<pre>

Eliminiamo il margine di pagina dal div e lo mettiamo in posizione assoluta tramite il css

body {
   margin:0 auto;
}
#center {
   position: absolute;
}

Sempre nell’header richiamiamo la libreria jquery.js

<script type="text/javascript" src="js/jquery.js"></script>

ed in ultimo o nell’header o nel body inseriamo il nostro script di centramento.

<script type="text/javascript">// <![CDATA[
            $(document).ready(function(){
                centerDiv();
                function centerDiv(){
                    $('#center').css("left",(($(document).width())/2)*1-($('#center').width()/2)*1+"px");
                    $('#center').css("top",(($(window).height())/2)*1-($('#center').height()/2)*1+"px");
                }
                $(window).resize(function() {
                    centerDiv();
                });
            });

// ]]></script>

Il codice completo dell’esempio:


        Div Centrato
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">// <![CDATA[
            $(document).ready(function(){
                centerDiv();
                function centerDiv(){
                    $('#center').css("left",(($(document).width())/2)*1-($('#center').width()/2)*1+"px");
                    $('#center').css("top",(($(window).height())/2)*1-($('#center').height()/2)*1+"px");
                }
                $(window).resize(function() {
                    centerDiv();
                });
            });

// ]]></script>

</pre>
<div id="center" style="background-color: #900; width: 362px; height: 167px;">Prova</div>
<pre>

Clicca qui per vedere l’esempio funzionante.

VN:F [1.9.22_1171]
Rating: 6.0/10 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Pillole di jQuery - Centrare un div, 6.0 out of 10 based on 2 ratings

Tags: , , , ,

Category: Informatica

About the Author ()

Leave a Reply