Return to Snippet

Revision: 28399
at July 8, 2010 00:11 by mihael


Initial Code
(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);

Initial URL


Initial Description
jQuery plugin for vertical centering the matched elements.

Instructions:

1. Save the code into file: jquery.verticalAlign.js
2. Include "jquery.js" and "jquery.verticalAlign.js" in the head section of your document
3. use like this:

jQuery(document).ready(function($) {

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

});

Initial Title
jQuery plugin: Vertical Align

Initial Tags


Initial Language
jQuery