使用jquery在一个div中垂直对齐div？

Posted 2023-03-05

【中文标题】使用jquery在一个div中垂直对齐div？

【英文标题】：vertical align div within a div using jquery?

【发布时间】：2010-11-01 05:29:56

【问题描述】：

有人对 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);

【问题讨论】：

谢谢大家，最后我还是选择了下面的，不是没有错误但是COMMENTS中有更正，IE中有错误但是有更正就可以了……@987654321 @也许对别人有用

【参考方案1】：

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

使用 $().css() 使用 jQuery 将这个 css 应用于标记相当容易

【讨论】：

***.com/questions/967022/… 也有一个相关的讨论。