javascript - 如何让 jQuery 在窗口调整大小时动态添加 css

Question

我目前水平和垂直对齐一个 div。它的宽度和高度取决于它的 child 的大小。我正在使用这段代码成功地做到这一点。

$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

我希望它在页面窗口调整大小时继续工作，因为它目前没有。任何帮助都会很棒。谢谢

在您的帮助下，我已经开始工作了。这是布局代码的最佳方式吗？

<script>
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

    $(window).resize(function() {
        $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
    });
</script>

Answer 1

您是否尝试过使用 jQuery window resize函数，$(window).resize(function() {}); ？每当调整页面大小时，都会调用此函数中的任何内容:

$(window).resize(function() {
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

});

您也可以通过$(window).resize();手动调用此函数