vertikaler align div in einem div mit jquery?

Question

Wer noch keine Erfahrung mit jquery vAligh Plugins oder ähnliches?

Ich habe versucht, den folgenden auszurichten aber es funktioniert nicht .. Ich war ein einfaches valign Plugin (ich werde das Plugin am Ende gesagt, es ist eine Jquery-Erweiterung), wenn jemand helfen kann es sehr hilfreich sein würde ...

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

here die FN-Erweiterung ..

(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

Sie könnten versuchen, eine CSS-Technik vertikal Zentrum Elemente verwenden, wie dargestellt hier . Ich glaube, die Methode ist Cross-Browser, leider fügt es einen extra div zu Ihrem Markup.

Es wäre ziemlich einfach, diese CSS Markup anwenden jQuery verwenden, mit $().css()