使用jQuery垂直定位图像

我有一个图像.personal，我想在页面加载和调整大小时垂直居中.personal行（自身在.row main内）。典型的垂直对齐：中间对齐；不起作用，所以我认为将.personal和.row main之间的高度差除以2，然后给出顶部和底部填充的图像是合乎逻辑的。这将有效地垂直对齐它。我也只想在桌面大小下启动它，因此是有条件的。由于某些原因，当我调整大小时，填充变得绝对巨大

这是我的密码：

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

这在我脑子里是有道理的，但由于某种原因，它不能正常工作。有什么帮助吗

---

谢谢

对不起，我知道您要求调试js，但是css flexbox对这样的东西不起作用吗

---

除非您支持非常旧的浏览器，否则我还强烈建议您使用flexbox，原因有两个：性能和可访问性

尽管这对许多设备来说可能不是一个大的改进，但您可能会遇到一些问题，比如速度较慢的设备（如移动电话）加载JS的时间比预期的要晚，这会导致页面显示方式出现问题。此外，对于现在几乎所有现代浏览器都可以在本机上完成的事情来说，计算量很大；所以这是浪费代码

其次，就可访问性而言，在用户的JavaScript被关闭或因任何原因无法工作的情况下，最好尽可能多地保留JavaScript的样式

就您的样式而言，我假设您的内容HTML类似于：

因此，相应的CSS样式（包括供应商前缀）将是：

.personal行{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
}

---

如果你有任何问题，请告诉我

我也会选择CSS，但您希望使用jQuery。你写道：

$('.personal').css({'height':((0.5*$('.jumbotron').height())+'px')});

等等

对于设置CSS像素大小，通常需要将它们写在引号中（作为字符串），如

相反，您可以使用包含该字符串（48px）的变量，但不能使用不带引号的字符串。我会首先使用变量获取高度，然后计算新高度并使用如下结果：

var height1 = $('.jumbotron').height());
var height2 = 0.5 * height1 +'px';    
$('.personal').css({'height': height2});

---

（可能有点复杂，但它可以工作）

停止JS的胡说八道，使用CSS。个人行在里面。行主，但你有它下来。但是，该代码似乎对行的垂直位置没有影响。除非你不这么认为，否则它看起来不会被引导覆盖。如果没有实际使用的HTML/CSS，很难进行调试，因为可能存在一些冲突因素。如果垂直位置不受影响，可能是因为flex容器的高度仅设置为内容相对于容器的高度。如果在包含元素周围放置边框或轮廓，您应该能够看到高度，这可能有助于调试正在发生的事情。

var height1 = $('.jumbotron').height());
var height2 = 0.5 * height1 +'px';    
$('.personal').css({'height': height2});