Javascript 按按钮调整浏览器大小时居中不工作的功能

我编写了一个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（）上调用

以下是正确行为的屏幕截图

同样，当页面加载时以及当句柄调整页面大小时，这也会起作用

以下是通过浏览器中的“切换全屏”按钮调整页面大小时发生的不正确行为

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

非常感谢

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

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

您使用的是哪个jQuery和浏览器

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

去盎司示例：

或者你可以试试这样：

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

---

这可能取决于您的firefox版本。也许这个问题与该主题相关，应该与计时器一起工作？你在FF22上剪的很好

当你“按一个按钮调整浏览器大小”时，你的中心功能会被调用吗？也许你的功能还可以，但它不会被触发。你在哪个浏览器中遇到这个问题？我们能得到一个演示吗？@Capricorn，只要使用$（window.resize（）；）调整浏览器的大小，就会调用它@有人说，我在最近的firefox上遇到了问题。有没有理由不将

标题的样式设置为
文本对齐：居中
并删除所有javascript？这就是
内联块的要点。这似乎应该是一个注释。你是想把它作为答案贴出来吗？（OP已经说过他正在使用resize事件，你可以看到他在演示中）Google和最新firefox托管的最新jQuery。当通过拖动页面来调整大小时，它确实可以工作，但不能通过浏览器顶部的“切换全屏”按钮来调整大小。我需要50多个代表才能对OP发表评论：（我首先尝试了添加计时器，但问题仍然存在。：/rayryeng好的，对不起。我认为这可能是一个可能的解决方案。我搜索了一个报告的问题和可能的解决方法，并粘贴了它。但以后我会注意我写的内容。