<div> 中的垂直对齐 <h2>答案

【问题标题】：vertical-align <h2> in a <div><div> 中的垂直对齐 <h2>
【发布时间】：2011-02-08 04:05:58
【问题描述】：

我有以下代码：

<div style="height: 120px; background: none repeat scroll 0% 0% rgb(45, 144, 234); color: rgb(255, 255, 255); vertical-align: bottom;">
    <div style="vertical-align: bottom; height: 120px;">
        <h2 style="vertical-align: bottom; height: 120px;">text</h2>
    </div>
</div>

我无法将文本放到嵌套 div 的底部。我不能使用 padding-top 或 margin-top，因为我偶尔会有文本换行。

有人可以给我建议吗？

【问题讨论】：

vertical-align 不适用于 DIV

标签： html css vertical-alignment

【解决方案1】：

<div style="display:table-cell; vertical-align:bottom;">Personal Information</div>

【讨论】：

如果您使用的是 CSS 样式表，您可以在其中应用它...请参阅：jsfiddle.net/johnk1/yYcsU/5
注意：display:table-cell;是否支持IE8+quirksmode.org/css/display.html

【解决方案2】：

<div style="height: 120px;">
    <div style="height: 120px;">
        <h2 style="position: absolute; bottom: 0">text</h2>
    </div>
</div>

应该可以。

现在不管h2 文本有多长，它都会停留在div 的底部。

【讨论】：

而且，正如 K Ivanoc 正确指出的那样：转储垂直对齐。它们不适用于您的 div。