disign.it | Jquery: centrare orizzontalmente e verticalmente | a digital sign for a best design!
A digital sign for a best design
Programmazione 3.815 visualizzazioni

Jquery: centrare orizzontalmente e verticalmente

07/05/2012

Attraverso l'utilizzo di Jquery possiamo bypassare l'uso di complicati CSS e Javascript per ottenere facilmente una centratura sia verticale che orizzonatel di un div.

Come sempre occorre prima di tutto caricare l'ultima versione di Jquery, (qui l'articolo). Nell'esempio che segue avremo un wrapper con uno stile in linea (ma lo stile può anche esser in css esterno) che definisce obbligatoriamente larghezza e altezza del box.

 

div id="wrapper" style="width: 400px; height: 400px; border: 1px solid black;"
qui il contenuto
/div

 

 

e al fondo del codice, prima della chiusura del body

 

    jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
    }
    
    
    $('#wrapper').center();

← Php: inviare i risultati di una query in mail Jquery: applicare automaticamente classi diverse ai link →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.