jquery - Html/Css 在一个 div 中垂直居中一个 div

Question

大家好，这是我的问题:

我有一个 html/css 网站，并且有几个父子 div。我需要制作一个脚本(Jquery？)来找到父级和子级的 div 高度，并添加必要的 css 以使子级在父级中居中...

<div class="parent">
 <div class="child">
 </div>
</div>
.....
<div class="parent">
 <div class="child">
 </div>
</div>
....
<div class="parent">
 <div class="child">
 </div>
</div>

<SCRIPT>
???
</SCRIPT>

谢谢大家...

Answer 1

使用 jQuery:

LIVE DEMO

$('.parent').each(function(){

  var $pa = $(this);
  var $ch = $pa.find('.child');
  var paH = $pa.innerHeight();
  var chH = $ch.innerHeight();

  $ch.css({marginTop: (paH-chH)/2});

});

如果您的 .child 中有图像，我建议您为该图像分配一个 height="" 属性，或者将 JS 放入一个函数中并在 $(window).load(function(){/*here*/});

上调用它