Question

任何人都有使用jquery vAligh插件或类似的经验吗？

我试图调整以下内容，但它失败了..我使用的是一个简单的valign插件（我会将插件放在最后，它是一个jquery扩展名），如果有人可以提供帮助那将会非常有帮助...

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

继承了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

您可以尝试使用CSS技术垂直居中项目，如here所示。我相信这种方法是跨浏览器的，但不幸的是它为你的标记添加了额外的div。

使用jQuery使用$().css()

将此css应用于标记相当容易

使用jquery在div中对齐div？

1 个答案: