3

我正在尝试在其父级中垂直和水平地居中 div。

JSFIDDLE:http: //jsfiddle.net/pE5QT/

CSS:

.parent {
    width: 200px;
    height: 200px; 
    background-color:red;
}

.child {
    height: 100px;
    width: 100px;
    background-color:yellow;
}

HTML:

<div class="parent"> b
    <div class="child"> a </div>
</div>

Javascript:

var parent = $('.parent');
var parentDimensions = parent.height() * parent.width();

var child = $('.child');
var childDimensions = child.height() * child.width();

parent.html();
child.html(childDimensions);

我很想得到答案,但我也很想了解它背后的逻辑。

4

3 回答 3

5

使用 jQuery.css函数,如下所示:

 child.css({
   top: parent.height()/2 - child.height()/2 ,
   left: parent.width()/2 - child.width()/2
 }) ;

不是很优雅,但它有效。逻辑是通过定义子容器的和属性absolute将子容器相对于其父容器放置在适当的位置。topleft

看看:http: //jsfiddle.net/pE5QT/9/

PS:CSS 解决方案当然更适合这里,但问题的标题是“ Using jQuery to center a div within its parent ”,所以......

于 2013-06-28T16:26:49.567 回答
1

试试这个代码:

var parent = $('.parent');
var child = $('.child');

child.css("position","absolute");
child.css("top", ((parent.height() - child.outerHeight()) / 2) + parent.scrollTop() + "px");
child.css("left", ((parent.width() - child.outerWidth()) / 2) + parent.scrollLeft() + "px");

这是工作演示:http: //jsfiddle.net/pE5QT/23/

于 2013-06-28T16:32:51.767 回答
0

你需要格式化你的代码,因为它看起来有点……恶心。

无论如何,这就是我的做法。在您的孩子 CSS 中,您可以执行以下操作:

.child {
   height: 100px;
   width: 100px;
   background-color:yellow;

   margin-left: auto;
   margin-right: auto;
}

然后为您的垂直定位:

child.css({'margin-top': (parent.height() - child.height()) / 2);
于 2013-06-28T16:32:19.297 回答