0

大家好，这是我的问题：

我有一个 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>

谢谢大家...

4

5 回答 5

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*/ });

于 2013-02-21T11:00:04.313 回答
0

如果我理解 ui 认为你可以用这个 css 做到这一点：

.parent {
  height: auto;
  overflow: hidden; /* This actually makes height auto */
  padding: 10px 0; /* exmaple of 10px up and down that will actully center it with some space IF space is needed*/
}
于 2013-02-21T10:56:14.290 回答
0

这里不需要使用 jQuery，您可以使用overflow:auto组合 with margin，如下面的链接所示。

工作小提琴

.parent{overflow:auto;width:100px;height:100px;background-color:green;margin-bottom:10px;}
.child{width:50px;height:50px;background-color:blue;margin:25px;}

您还可以在此处用百分比替换像素。

这也可以使用floatordisplay属性而不是overflow:auto.

于 2013-02-21T10:56:43.153 回答
0

另一种方法是将display父 div 的属性设置为table-cell. 这是代码：

<div style="display:table-cell; height:200px; border:1px solid red; vertical-align:middle; align: center;">
    <div style="height:100px; border:1px solid blue;">The content</div>
</div>

这就是它的样子：

http://screencast.com/t/6kB9ec1uV

您不需要脚本，除非您除了将子 div 居中之外还想做其他事情。祝你有美好的一天 ！

于 2013-02-21T10:58:52.707 回答
0

你可以试试这个 jQuery 代码：

$(document).ready(function () {
  var childHeight  = $('.child').css('margin-top', function() {
    var childHeight = $(this).height();
    var parentHeight = $(this).parent().height();
    return ((parentHeight - childHeight) / 2);
  });
});

基本上，在加载文档后，您检索所有具有子类和相对父
类的 DOM 元素的高度， 您需要它来计算子 obj 的margin-top值。

于 2013-02-21T11:08:58.070 回答