jQuery plugin for vertical centering the matched elements

//save this code as jquery.verticalAlign.js
    (function($){
     
    $.fn.extend({
     
    verticalAlign: function() {
     
    //Iterate over the current set of matched elements
    return this.each(function() {
     
    var obj = $(this);
     
    // calculate the new padding and height
    var childHeight = obj.height();
    var parentHeight = obj.parent().height();
    var diff = Math.round( ( (parentHeight - childHeight) / 2) );
     
    // apply new values
    obj.css( { "display": "block", "margin-top": diff } );
     
    });
    }
    });
     
    })(jQuery);


//use like this:
jQuery(document).ready(function($) {

$("#someDiv").verticalAlign();

});

//webkit browsers require window.load():
jQuery(window).load(function()) {

$("#someDiv").verticalAlign();

});

Leave a Reply