javascript - jS居中功能不适用于页面加载中的一个元素，只需调整大小

Question

编辑:我知道这不是最好的方法，它可以用 css 来完成，但我只是想知道为什么代码对一个元素不起作用，就像对其他 2 个元素一样。我想了解那个。

在我的 jS 中，我使用以下方法将页面中的 div 居中，但它仅在我调整大小时触发 smIcons，而不是在页面加载时触发。它适用于 comingSoon 和 Logo 的页面加载，而不是 smIcons。这是为什么？

$(document).ready(function (){

    centerInViewport('#comingSoon');
    centerInViewport('#logo');
    centerInViewport('#smIcons');

    $(window).resize(function () {
        centerInViewport('#comingSoon');
        centerInViewport('#smIcons');
        centerInViewport('#logo');
    });


});

function centerInViewport(e) {

    $docWidth = $(document).width();
    $docHeight = $(document).height();
    $elWidth = $(e).width();
    $elHeight = $(e).height();
    $offsetW = ($docWidth - $elWidth) / 2;
    $offsetH = ($docHeight - $elHeight) / 2;

    $(e).css("marginLeft", $offsetW + "px");

    if(e == '#comingSoon'){
        $(e).css("marginTop", $offsetH+200 + "px");    
    }else if(e == '#smIcons'){
        $(e).css("marginTop", $offsetH+50 + "px");    
    }else if(e == '#logo'){
        $(e).css("marginTop", $offsetH-150 + "px");    
    }
}

CSS:

#comingSoon {
  position: absolute;
}

#logo {
  position: absolute;
}

#smIcons {
  position: absolute;
}

加载方式:

调整大小后的外观(加载时的外观):

Answer 1

尝试在 $(window).load() 而不是 $(document).ready() 中调用计算函数，因为元素宽度的计算是在所有元素都已加载。