jquery - 使用 jQuery 垂直定位图像

Question

我有一张图像 .personal，我想在 .personal-row 中垂直居中(它本身在 .row-main 中)在页面加载和调整大小时。典型的 vertical-align: middle; 不起作用，所以我认为采用 .personal 和 .row- 之间的高度差是合乎逻辑的main，将其一分为二，并在顶部和底部填充图像。这将有效地垂直对齐它。我也只希望它以桌面尺寸启动，因此是有条件的。出于某种原因，当我调整大小时，填充变得绝对巨大。

这是我的代码:

$('.personal').css({'height':((0.5*$('.jumbotron').height())+'px')});
  if($(window).width() > 720){
    var originalPadding = (($('.row-main').height() - $('.personal').height()) / 2);
    $('.personal').css({'padding-top': originalPadding + 'px'});
    $('.personal').css({'padding-bottom': originalPadding + 'px'});
  }
  $( window ).resize(function() {
      $('.personal').css({'height':((0.5* $('.jumbotron').height()) +'px')});
      //row height - image height / 2 = padding
      if($(window).width() > 720){
        var centeredPadding = (($('.row-main').height() - $('.personal').height()) / 2);
        $('.personal').css({'margin-top': centeredPadding + 'px'});
        $('.personal').css({'margin-bottom': centeredPadding + 'px'});
      }
  });

这在我看来是有道理的，但由于某种原因无法正常工作。有帮助吗？

谢谢!

Answer 1

抱歉，我知道你要求调试你的 js，但是 css flexbox 不能用于这样的事情吗？

https://css-tricks.com/snippets/css/a-guide-to-flexbox/