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