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');
        });

    }


});

正如你在链接中看到的那样，元素永远不会达到正确的高度，但我找不到原因。

Answer 1

没有必要让jQuery垂直居中你 - 你可以用计划CSS来做。

我在inspect元素中看到每个列都获得了某个值的填充顶部。我想这来自你的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（）并再次重新计算该值。

解决方案是改变这个：

public class Activity12 extends AppCompatActivity {



@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_12);

}


@Override
protected void onStart() {

    Intent intent = new Intent(this,AlertReceiver.class);
    PendingIntent pendingIntent = PendingIntent.getBroadcast(getApplicationContext(),100,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent1 = PendingIntent.getBroadcast(getApplicationContext(),101,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent2 = PendingIntent.getBroadcast(getApplicationContext(),99,intent,PendingIntent.FLAG_UPDATE_CURRENT);

    AlarmManager alarmManager = (AlarmManager)getSystemService(ALARM_SERVICE);


    alarmManager.cancel(pendingIntent);
    alarmManager.cancel(pendingIntent1);
    alarmManager.cancel(pendingIntent2);
    super.onStart();
}


@Override
protected void onPause() {

    Intent intent = new Intent(this,AlertReceiver.class);
    PendingIntent pendingIntent = PendingIntent.getBroadcast(getApplicationContext(),100,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent1 = PendingIntent.getBroadcast(getApplicationContext(),101,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent2 = PendingIntent.getBroadcast(getApplicationContext(),99,intent,PendingIntent.FLAG_UPDATE_CURRENT);

    AlarmManager alarmManager = (AlarmManager)getSystemService(ALARM_SERVICE);
    alarmManager.cancel(pendingIntent);
    alarmManager.cancel(pendingIntent1);
    alarmManager.cancel(pendingIntent2);
    super.onPause();
}


@Override
protected void onStop() {

    Calendar calendar =Calendar.getInstance();

    Intent intent = new Intent (getApplicationContext(),AlertReceiver.class);
   // intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);

    PendingIntent pendingIntent = PendingIntent.getBroadcast(getApplicationContext(),100,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent1 = PendingIntent.getBroadcast(getApplicationContext(),101,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent2 = PendingIntent.getBroadcast(getApplicationContext(),99,intent,PendingIntent.FLAG_UPDATE_CURRENT);

    AlarmManager alarmManager = (AlarmManager)getSystemService(ALARM_SERVICE);
    alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), AlarmManager.INTERVAL_FIFTEEN_MINUTES , pendingIntent);
    alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), AlarmManager.INTERVAL_FIFTEEN_MINUTES , pendingIntent1);
    alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), AlarmManager.INTERVAL_FIFTEEN_MINUTES , pendingIntent2);

    super.onStop();
}

@Override
protected void onDestroy() {

    Calendar calendar =Calendar.getInstance();
    Intent intent = new Intent (getApplicationContext(),AlertReceiver.class);
 //   intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);

    PendingIntent pendingIntent = PendingIntent.getBroadcast(getApplicationContext(),100,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent1 = PendingIntent.getBroadcast(getApplicationContext(),101,intent,PendingIntent.FLAG_UPDATE_CURRENT);
    PendingIntent pendingIntent2 = PendingIntent.getBroadcast(getApplicationContext(),99,intent,PendingIntent.FLAG_UPDATE_CURRENT);

    AlarmManager alarmManager = (AlarmManager)getSystemService(ALARM_SERVICE);
    alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), AlarmManager.INTERVAL_FIFTEEN_MINUTES , pendingIntent);
    alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), AlarmManager.INTERVAL_FIFTEEN_MINUTES , pendingIntent1);
    alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), AlarmManager.INTERVAL_FIFTEEN_MINUTES , pendingIntent2);
    super.onDestroy();
}

到此：

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

用于垂直对齐元素的Jquery函数不起作用

2 个答案: