Question

我遇到以下功能问题。它的目的是将所有div与“center_vert”类垂直居中于其父级。加载页面时，只有“center_vert”类的第一个div垂直居中。当我调整页面大小时，所有元素都居中。为什么并非所有具有“center_vert”类的div都以加载为中心？

$(document).load($(window).bind("resize", centerVertically));
$(document).ready(centerVertically ());

function centerVertically() {
    $('.center_vert').each(function(){
           var parentHeight = $(this).parent().height();   
           var selfHeight = $(this).height();   
           $(this).css('padding-top', function(i,x){return ((parentHeight-selfHeight)/2);});
    });
};

Answer 1

删除函数名称附近的空白区域。您应该在浏览器控制台中收到与此错误相关的错误。

$(document).ready(centerVertically());

Answer 2

这里没有JS的解决方案：

<div class="grid_100 tece window_60">
    <div class="center_vert"></div>
</div>
<div class="grid_100 tece window_60">
    <div class="center_vert"></div>
</div>


.grid_100 {
    display:table;
    width: 100%;
}

.grid_100 > * {
    display:table-cell;
    vertical-align:middle;
}

Answer 3

我把它添加到JS：

$(document).ready(setTimeout (centerVertically, 100));

我认为，浏览器必须等待父DIV的大小调整（由JS根据窗口高度完成），然后激活“centerVertically”函数。有趣的是，我的调整大小代码在我的JS文件中的“centerVertically”函数之前。我认为它不是一个非常干净的解决方案但它的确有效。有人知道如何更好地解决这个问题吗？

以下代码调整了div的大小：

$(document).ready(function(){
    $(window).on('load resize', function(){
        $('.window_60').height($(window).height()*0.6);
    });
});

加载和调整大小时在类上执行函数（Jquery）

3 个答案: