Question

我试图使用jquery在我的页面上居中一个div并且核心代码工作正常，它在调整页面大小时使div居中。但是我需要调整大小以便加载，因此我在自定义代码之后立即调用$(window).reize();，但出于某种原因，它只在您调整页面大小时才有效，而不是在页面加载时。

以下是代码：

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>TEST PAGE</title>
        <link rel="stylesheet" type="text/css" href="style.css" >
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    </head>

    <script>

        $(window).resize(function()
                         {

        $('.mainContent').css({
            position:'absolute',
            left: ($(window).width() - $('.mainContent').outerWidth())/2,
            top: ($(window).height() - $('.mainContent').outerHeight())/2
        });

        });

        // To initially run the function:
        $(window).resize();

    </script>

    <body>

        <div class="mainContent">
        This is a test

        </div>


    </body>

</html>

Answer 1

使用 ready 在$(document).ready

中设置代码

$(document).ready(function(){ 

 $(window).resize(function()
                         {

        $('.mainContent').css({
            position:'absolute',
            left: ($(window).width() - $('.mainContent').outerWidth())/2,
            top: ($(window).height() - $('.mainContent').outerHeight())/2
        });

        });

        // To initially run the function:
        $(window).resize();

});

Answer 2

您可以在结尾后立即触发调整大小，如下所示：

$(window).resize(function()
                         {

        $('.mainContent').css({
            position:'absolute',
            left: ($(window).width() - $('.mainContent').outerWidth())/2,
            top: ($(window).height() - $('.mainContent').outerHeight())/2
        });

        }).resize();

Answer 3

将脚本放在body标签中，然后继续使用ready函数并检查它是否正常工作？

Answer 4

我认为您的src属性存在问题。如果您尝试引用在线脚本只需用（https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js）替换您的src，然后您可以继续使用ready函数。我尝试了您的代码和它对我来说很好。

jQuery在加载时调用resize窗口

4 个答案: