Question

我想制作启动页面，它只包含链接中的图像。该图像必须在窗口上垂直和水平居中。我正在使用jQuery来实现这个目标：

$(window).resize(function(){

    $('#JUPITER').css({
        width: (100) + '%'
    });

    $('#middle').css({
        width: (450) + 'px',
        position:'absolute',
        left: ($(window).width() - $('#middle').outerWidth()) / 2,
        top: ($(window).height() - $('#middle').outerHeight()) / 2
    });

});

    $(window).load(function() {

    $('#JUPITER').css({
        width: (100) + '%'
    });

    $('#middle').css({
        width: (450) + 'px',
        position:'absolute',
        left: ($(window).width() - $('#middle').outerWidth()) / 2,
        top: ($(window).height() - $('#middle').outerHeight()) / 2
    });

});

$(window).resize();

#middle是父级占位符div #JUPITER是图片的ID。

当我调整窗口大小时，它就像我想要的那样工作。

但是当我重新加载页面时，它无法以正确的方式工作：图像在错误的位置显示正确的大小。

无论在重新加载页面之前如何更改窗口的大小，属性“left”始终都会获得值8px。属性“top”获取计算值，但它也不正确（从中心30px到方向底部）。我无法弄明白为什么。

Answer 1

尝试将样式应用于#middle

 Top:   50%;
 Left:  50%;
 width: 0px;
 Margin-left:  -225px;
 Position:  absolute;

（窗口）.load计算错误的css

1 个答案: