Jquery 垂直对齐元素的功能不起作用

Question

我正在使用此功能垂直对齐以下项目的信息link:

/* First make each project-section div full height */   
$(window).on("load resize scroll", function(e) {
    if ($(window).height() > 600 && $(window).width() > 980 ) {
        screenHeight = $(window).height();
        menuHeight = $('#main-header').outerHeight();
        finalHeight = screenHeight - menuHeight;
        $('.project-section').css('height', finalHeight + 'px');

        /* Then Vertically align the elements */
        var colHeightElement = $('.project-section > .et_pb_row > .et_pb_column');
        colHeightElement.each(function( index ) {
            var colHeight = $(this).outerHeight();
            var colPadding = (finalHeight-colHeight)/2;
            $(this).css('padding-top', colPadding + 'px');
        });

    }


});

正如您在 link 中看到的那样，元素从未获得正确的高度，但我找不到原因。

Answer 1

jQuery 不需要将您的 div 垂直居中 - 您可以使用计划 CSS。

我在 inspect 元素中看到您的每个列都获得了某个值的 padding-top。我想这来自您的 jQuery 脚本：

/* Then Vertically align the elements */
var colHeightElement = $('.project-section > .et_pb_row > .et_pb_column');
colHeightElement.each(function( index ) {
    var colHeight = $(this).outerHeight();
    var colPadding = (finalHeight-colHeight)/2;
    $(this).css('padding-top', colPadding + 'px');
});

删除该代码块并确保 .et_pb_column 没有任何填充或边距。

之后，添加此代码：

.project-section .et_pb_row {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;

    /* This will center your div vertically */
    height: 100%;
    display: flex;
    align-items: center;
}

Answer 2

我认为问题出在滚动功能上。用户第一次滚动时它采用 padding-top 0，但是当它继续滚动时它采用 .outerheight() 和给定的填充并再次重新计算该值。

解决方案是改变这个：

var colHeight = $(this).outerHeight();

对此：

var colHeight = $(this).height();

Jquery 垂直对齐元素的功能不起作用

Jquery function to vertical align the elements doesn't work

jquery

vertical-alignment