Javascript在父级内对齐垂直中心很多子div

时间:2015-12-09 11:03:59

标签: javascript css

尝试使用JavaScript动态调整div(使用pad的col),使其垂直位于父div(行)的中间位置。 文本块的大小与图像的大小不同,页面中有许多这些div。 我很接近使用提供的代码实现这一点,但循环似乎重复次数超过它应该并且在最后一次传递时错误地设置高度,几乎就像它一遍又一遍地减半空间。 有没有办法让JavaScript只运行一次?

<div class="row">
  <div class="col pad">
  <p>Text here</p>
  </div>
  <div class="col">
  <img src="image.jpg">
  </div>
</div>  

$(window).load(function(){
  $('.row').each(function() {
    var parentDiv = $(this).height();
    $('.pad').each(function() {
      var childDiv = $(this).height();
      var space = parentDiv - childDiv;
      var half = space/2;
      $(this).css('paddingTop', half + 'px');
      alert(half);
    });
  });
});

我无法使用css来实现这一点,因为col是浮动的。

0 个答案:

没有答案