使用jQuery垂直居中的div

时间:2014-02-01 16:01:33

标签: jquery html center vertical-alignment centering

我试图将我的div垂直放在另一个100%维度的div中。我的代码正在运行,但它给出了一些奇怪的错误。

这是我的代码:

var window_height = $(window).height();
    var content_height = $('#home-content').height();
    var v_center_value = window_height / 2 - content_height / 2;
    $('#home-content').css({top: v_center_value});

我也在screefly上测试它,看看它如何对不同的分辨率起作用。总的来说,有时它很好用,有时它会给我的#home-content元素带来更大的价值,它会低于页面的中心。

它随时可以使用。

以下是我正在测试的网站 - http://quirktools.com/screenfly/#u=http%3A//mkaramitev.free.bg&w=1366&h=768&a=1

这是原始网址 - http://mkaramitev.free.bg

1 个答案:

答案 0 :(得分:0)

我可能错了,但您遇到的问题可能是因为您正在使用的工具在模拟尺寸更改时似乎没有完全刷新。

您的页面无法响应页面加载之间的窗口大小调整。因此,如果用户加载您的页面然后调整其浏览器大小,它将不会重新设置设计。这可能就是你的意图。如果没有,您将需要将事件处理程序绑定到浏览器在调整大小时抛出的事件,以便重新定位元素。

jQuery有resize method绑定到resize事件。如果将代码抽象为另一个函数,则可能会出现以下内容。

$( window ).resize(function() {
    reposContent(); // this would be a call to your function
});