jQuery plugin for vertical centering the matched elements

    [javascript]
    //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();

    });
    [/javascript]

    Leave a Reply