0

我想知道有人知道如何在不知道父 div 高度的情况下将子 div 垂直居中在父 div 内？

我有一个 pinterest 风格的画廊页面（图像），在悬停时，我在图像顶部显示一个 div，其中包含有关图像的信息。知道因为每个图像可能有不同的高度，我不知道如何将子内容居中到父 div 的中间。

我正在使用 jQuery Masonary 插件来创建布局。

目前我有一个包含图像的外部 div。背景颜色为白色（或其他颜色）的内部 div 位于 0,0 位置，宽度和高度为 100%。这一切都很好，我已经能够通过简单地使用 text-align: center; 来水平居中。

非常感谢！

4

2 回答 2

0

这应该可以将其设置为双向居中。还没测试：

var ParentW = $("parent-id").width();
var ParentH = $("parent-id").height();
var ChildW = $("child-id").width();
var ChildH = $("child-id").height();
var PosW = (ParentW - ChildW)/2;
var PosH = (ParentH - ChildH)/3;
$("child-id").css({"top":PosH, "left": PosW });
于 2013-02-01T01:14:47.447 回答
0

如果您需要 CSS 解决方案，我认为这对您有用。

例如，如果您有这样的布局：

<div class="container">
    <div class="parent">
        <div class="child">
            Lorem ipsum....
        </div>
   </div>
</div>

使用此 CSS，您应该能够.child在容器内水平和垂直居中块.parent：

.parent {
    /* change values to adjust the top and bottom space used to vertically center */
    padding-top: 33%;
    padding-bottom: 33%;
}

.child {
    width: 50%; /* the width is not mandatory, of course */
    margin: auto;
    overflow: hidden;
}

你可以在这里测试它。希望这会有所帮助。

于 2013-02-01T01:54:24.170 回答