vertical align div dans un div utilisant jquery?

Question

Quelqu'un at-il une expérience avec les plugins jquery vAligh ou similaire?

J'ai essayé d'aligner pour le suivant mais il échoue .. J'utilisais un simple plugin valign (je mettrai le plugin à la fin, c'est une extension jquery), si quelqu'un peut l'aider serait vraiment utile .. .

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); 

Heres l'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

Vous pouvez essayer d'utiliser une technique CSS pour centrer verticalement des éléments, comme illustré here. Je crois que la méthode est cross-browser, même si malheureusement, il ajoute un div supplémentaire à votre balisage.

Il serait assez facile d'appliquer cette css au balisage en utilisant jQuery, en utilisant $().css()