垂直对齐头痛

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 一个position :relative 属性，因为它具有固定的高度。

然后，内部 div 可以有一个位置：绝对，并将其高度设置为 100% 或可能稍微低一些。您可以使用顶部属性来移动它。

Answer 2

尝试：

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

可能需要调整top：10%；

Answer 3

只要父/祖父母 div 具有与其配合的宽度，您就可以将“float: left”应用于孙子 div 样式。

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;}

NOTE

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

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