Question

我的网页布局如下......

|----------------------|
|     |----------|     |
|     | Logo div |     |
|     |----------|     |
|                      |
|     |----------|     |
|     |          |     |     
|     | Content  |     |
|     |          |     |
|     |----------|     |
|----------------------|

目前，我正尝试使用以下功能将div（Content）置于中心位置：

 jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft() + "px");
return this;

}

我从另一个SO问题中获得：Using jQuery to center a DIV on the screen

如果我的分辨率足够大，此功能可以正常工作，但是在较小的屏幕上它会导致div我居中“上升”并与div共享空间，其中包含徽标。所以我想用jQuery实现的是将其垂直居中于徽标div #logo和页面的“结尾”之间而不浮动在徽标div之上

我如何使用jQuery做到这一点？

Answer 1

由于它绝对定位，你无法真正引用它与另一个div相关。

您需要做的是检查高度/宽度计算，如果它们超出最低要求，则用固定值替换它们。您可以硬编码固定值或使用JQuery获取徽标div的高度。

有些事情：

var h = 100; //Height of logo div
var top_position = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop();

if(top_position < h)
    top_position = h;

this.css("top", top_position + "px");

使用jQuery将div放在另一个div和窗口底部之间

1 个答案: