Vertical alignment of div inside div using jquery?

Question

Does anyone have any experience with jQuery vAligh plugins or similar?

I tried to align for the following, but it does not work. I used a simple valign plugin (I will put the plugin at the end, its jquery extension), if someone can help, it will be really useful ...

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); $('body').append(overlayLayer); $('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer); this.render({ to: "content-for-overlay", partial: "office-location-modal" }); // this just copies html into the layer $('#content-for-overlay').vAlign(); THIS USES a plugin called valign but it doesn't align $("body").css("overflow", "hidden"); $('#office-location').css("opacity", 0.8).fadeIn(150); $('#content-for-overlay').css("opacity", 1); 

has the extension fn ..

 (function($) { $.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"); }); }; 

}) (Jquery);

Answer 1

You can try using the CSS technique for elements with a vertical center, as shown here here . I believe the method is a cross browser, but unfortunately it adds an extra div to your markup.

It would be pretty easy to apply this css to the markup using jQuery using $().css()