Question

我有一个图像 .personal ，我希望在 .personal-row （本身在 .row-main 中）垂直居中在页面加载和我调整大小时。一个典型的 vertical-align：middle; 没有用，所以我认为理解 .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'});
      }
  });

这在我的头脑中是有道理的，但由于某种原因，它没有正常工作。有什么帮助吗？

谢谢！

Answer 1

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

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

Answer 2

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

虽然对于许多设备来说可能不是一次大修，但是你可能会遇到速度较慢的设备（比如移动电话）的问题，这些设备加载JS的时间比预期的要快，这会导致页面显示方式变得笨拙。此外，对于现在几乎所有现代浏览器都可以原生化的东西来说，这是一个很大的计算;所以这是浪费的代码。

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

就你如何设计风格而言，我假设您的内容HTML类似于：

<div class="jumbotron">
  <div class="personal-row">
    <img class="personal" src="..." />
  </div>
</div>

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

.personal-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

如果您有任何疑问，请与我联系！

Answer 3

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

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

等

为了设置CSS像素大小，通常需要用引号（作为字符串）来编写它们，比如

$('.personal').css({'height':'48px'});

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

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

（可能有点复杂，但它有效）

使用jQuery垂直定位图像

3 个答案: