jquery resize() 使多个动态宽度 div 居中

Question

情况如下：

我有 3 个全宽部分，它们具有垂直居中的标题和左对齐的按钮 div。 当我们调整大小时，我想将当前位置为绝对的按钮居中。

这是我的想法： 调整窗口大小时

1. 外层的捕获宽度
2. 内部Div的捕获宽度
3. 从外部减去内部以确定剩余空间
4. 将剩菜分成 2 个相等的边距
5. 使用 .css() 应用以添加内部 Div 两侧的边距。

这就是我根据这个想法编写的脚本。

jQuery( window ).resize(function() {

    var parentWidth = 
    $( ".search__btn--wrapper" ).parent().width();

    var childWidth = 
    $( ".search__btn--wrapper" ).width();

    var marginWidth =
        parentWidth - childWidth;

    var halfWidth = 
        marginWidth/2;

    $( ".search__btn--wrapper" ).css("left" , halfWidth);
    $( ".search__btn--wrapper" ).css("right" , halfWidth);

    console.log('width is now' + $( window ).width() );
    console.log('parent of button element width:' + parentWidth );
    console.log('button element width:' + childWidth );
    console.log('leftover margins' + marginWidth );
    console.log('needed margins' + halfWidth );

});

目前的问题 尽管我能够在 every 调整大小时获得外部和内部的宽度，但由于某种原因，ma​​rginWidth 变量不会更新。 halfWidth

相同

我也在尝试为每个而不是第一个动态地进行这项工作，但这是次要的，我觉得只需要某种 .each() 循环。

我在第一部分缺少什么？ 我觉得我只是忽略了一些简单的事情：

Answer 1

我不明白用 jQuery 而不是 CSS 编写代码需要什么。您可以使用以下方法将绝对 div 居中在 div 相对中：

position:absolute;
left:0;
right:0;
margin:0 auto;