jQuery - vertical align plugin

There's a lot of vertical align javascript solutions around all using roughly the same mechanisms to vertically align html elements inside their containers. A good example of javascript stepping in where CSS seems to fail miserably. It seems strange that css fails to provide clear specifications for this essential alignment behavior in html lay-out.

Luckily it's quite easy to do with jQuery.

This works well for elements that are block displayed :

(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
		var ah = $(this).height();
		var ph = $(this).parent().height();
		var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);

source:

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/

The following also works for elements that are displayed inline (display:inline):

$.fn.vAlign = function() {
    return this.each(function(i) {
        var h = $(this).height();
        var oh = $(this).outerHeight();
        var mt = (h + (oh - h)) / 2;
        $(this).css("margin-top", "-" + mt + "px");
        $(this).css("top", "50%");
        $(this).css("position", "absolute");
    });
};

Keywords: css align table vertical vertically position

Reply: