Question

我创建了一个使用jQuery来集中<div>的函数，它适用于页面加载，但不会在页面调整大小。

我做错了什么？

JS：

<script>
    $( document ).ready(function() {
        function reCenter() {
            $('.content').css({
                position:'absolute',
                left: ($(window).width() 
                    - $('.content').outerWidth())/2,
                top: ($(window).height() 
                    - $('.content').outerHeight())/2
            });             
        }
        $(window).resize(reCenter());
        // To initially run the function:
        reCenter();
    });
</script>

HTML：

<div class="content">
    <h1>Header</h1>
    <span class="hyphen">-</span>
    <h2>Subtext</h2>
</div>

CSS：

* {
            padding: 0;
            margin: 0;
        }
        html { 
            background: darkgrey;
        }
        body {
            color: #fff;
            text-align: center;
            /*padding-top: 300px;*/
        }
        h1 {
            font-family: 'Arimo', sans-serif;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 40px;
        }
        span.hyphen {
            color: #0CFFFC;
            font-size: 3em;
        }
h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 100;


        }

更新
在页面加载后启动函数后，它在页面加载和窗口大小调整之间有一些不一致的行为 http://jsfiddle.net/7zqkd4w8/

Answer 1

它应该是$(window).resize(reCenter);，因为你发送的函数不是调用函数的结果。

Answer 2

您正试图找到＆＃39; .content＆＃39;的宽度。 DIV。除非浮动或绝对，否则你不会获得div的适当宽度。你在reCenter（）中给.content绝对类;所以，如果你两次（第一次）触发你的调整大小功能，那就可以了。

$(window).on('resize',function(){
   reCenter()
}).resize().resize();

但建议的方法只是在内容中添加float，现有代码应该可以正常工作。

.content{
    float:left;
}

Answer 3

你应该这样做：

$(window).on('resize',function(){
   reCenter()
}).resize();//triggers on first page load

为什么我的函数不在.resize（）上运行？

3 个答案: