按钮调整浏览器大小时居中不起作用

Question

我编写了一个jquery函数，该函数在每次调整页面大小或加载页面时将宽度未知的内联块元素居中。它计算元素的宽度，然后获得页面的宽度，并将元素的左边距设置为页面宽度-元素宽度/ 2。除非通过按下顶部的按钮或浏览器切换全屏来调整页面的大小，否则这种方法是有效的。

我想不出为什么这不起作用，但当页面以这种方式调整大小时，页面似乎没有重置左边距。有没有办法解决这个问题？

下面是代码。

$.fn.center = function() {

    this.each(function() {
        $(this).css("display", "inline-block");

        var pageWidth = $(window).width();
        var elementWidth = $(this).width();

        if ((pageWidth - elementWidth) > 0) {
            $(this).css("margin-left", ((pageWidth - elementWidth) / 2) + "px");
        }
    });

    return this;
};

它在document.ready()、window.load()和window.resize()上调用。

这是一个正确行为的屏幕截图。

​

​

同样，当页面加载并且通过句柄调整其大小时，这也是有效的。

这是当浏览器中的切换全屏按钮调整页面大小时发生的不适当行为。

​

​

有没有人知道如何纠正这种行为？

非常感谢！

编辑:我想这是我的调整大小功能的问题。页面正在注册它已调整大小，但元素未正确居中，除非通过拖动手柄调整页面大小。我想知道为什么当切换页面时它不能工作...

Answer 1

$(window).resize(function() { 
   console.log('resize!');
});

您使用的是哪种jQuery和浏览器？

如果你使用的是Firefix，我认为可能需要更多的时间来实现调整大小。那么，也许在超时后去抖动或触发你的脚本可以解决问题？

退回示例：http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

或者，您可以尝试如下所示：

$(window).resize(function() {
  console.log('resize');
  setTimeout(function() {
    console.log('later resizing');
  }, 150);
});

这可能取决于您的firefox版本。也许这个问题与这个主题相关，应该使用计时器？你剪掉的在FF22很管用