垂直排列头痛

Question

我无法在100％高度div内垂直对齐2个div。我用谷歌搜索但未能解决。

伪代码：

<div container, fixed height>
  <img, dynamic height/>
  <div inner, 100% height>
    <div><img/></div>
    <div><img/></div>
 </div>
</div>

内部div中的两个div，我希望它们位于内部div的垂直中心，但我无法找到方法。它不可能知道内部div的高度，它只是设置为100％，因为它上面的图像的随机高度。内部div内的div也有动态高度。

2个小时的摆弄没有结果，所以我来到这里。

您可以在其中看到它的页面：http://pyntmeg.no/?iframe

Answer 1

你可以给父DIV.container一个位置：相对属性，因为它有一个固定的高度。

然后内部div可以有一个位置：绝对，你可以将它的高度设置为100％或者更低一点。你可以使用top属性来移动它。

Answer 2

尝试：

.item {
    position: relative;
    top: 10%;
}

您可能需要调整顶部：10％;

Answer 3

只要父/祖父母div具有与其一起使用的宽度，您就可以应用＆＃39; float：left＆＃39;对孙子们的风格。

Answer 4

vertical-align用于表元素，而不是常规div等。为了使vertical-align中间工作，元素需要设置为display:table-cell并且它的父元素需要设置为display:table-row

但要小心，因为它确实改变了元素与其兄弟元素交互的方式，并且它肯定会改变页面布局的方式。

最好的用法是：

<div class="table-row">
    <div class="td">lorem ipsum</div>
    <div class="td">dolor sit amat</div>
</div>

的CSS：

.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}

注意

这不适用于左/右浮动的元素，它将改变边框宽度如何影响元素的整体宽度。

我只会将其与表格数据一起使用，就像我建议只使用表格一样。