使用jquery垂直对齐div内的div?

发布于 2024-07-23 08:19:50 字数 1141 浏览 4 评论 0原文

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

Anyone have any experience with jquery vAligh plugins or similar?

I tried to align for the following but it fails.. I was using a simple valign plugin (I will put the plugin at the end, its a jquery extension), if anyone can help it would be really helpful...

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 the FN extension..

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

池予 2024-07-30 08:19:50

您可以尝试使用 CSS 技术来垂直居中项目,如 此处< /a>.
我相信该方法是跨浏览器的,但不幸的是它为您的标记添加了一个额外的 div。

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

You could try using a CSS technique to vertically centre items, as shown here.
I believe the method is cross-browser, though unfortunately it adds an extra div to your markup.

It'd be fairly easy to apply this css to the markup using jQuery, using $().css()

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文