垂直对齐 div 中的标题和段落答案

【问题标题】：Vertically align a heading and a paragraph in a div垂直对齐 div 中的标题和段落
【发布时间】：2012-06-22 02:27:32
【问题描述】：

我正在尝试垂直对齐一个 h1 元素和一个 div 中间的 p 向左浮动，但它们最终彼此相邻垂直对齐。我很确定它与表格单元格显示有关，但不知道如何垂直对齐。

我的代码给了我：

.
.
Heading Paragraph
.
.

我想要：

.
.
Heading
Paragraph
.
.

这是我的代码：

CSS：

#HDRtext 
{
    float:  left;
    width: 30%;
    height: 335px;
    padding: 0;
    display: table;
    color:  white;
}

#HDRtext h1 
{
    font-family: Georgia;
    font-size: 2em;
    display: table-cell;
    vertical-align: middle;
}

#HDRtext p {
    display: table-cell;
    vertical-align: middle;
    font-size:1em;
    font-family: Georgia;
}

这里是 jsfiddle：jsfiddle

【问题讨论】：

看看这个问题：link，还有这个有用的资源：@987654323@

标签： html css css-tables

【解决方案1】：

这是一个带有示例的页面：http://jsfiddle.net/Z468Z/1/

我把你的id换了一个class，在css中使用id是个坏习惯。

我个人更喜欢 inline-block 作为表格/表格行/表格单元格显示。

使用 inline-block 垂直对齐中间需要了解的内容：

容器的高度和行高必须相同。
你想要在中间的孩子，必须是“inline-block”类型，在这个孩子中你必须恢复适当的行高
他的孩子可以是块类型（如我的示例）

【讨论】：

感谢 DieVarDump，我喜欢这个，因为它不使用表格单元格显示

【解决方案2】：

您必须 vertically align the div 包含它们（或将它们放在另一个 div 中并将其放置在原始 div 中）。

【讨论】：

谢谢Kyomu，我把它放在另一个div中并垂直对齐。

【解决方案3】：

This Page 解释并展示了一种向下垂直对齐的方法。

【讨论】：

【解决方案4】：

要正确垂直居中元素，您需要一个绝对定位的 div，它距顶部高度的 50%，然后是一个偏移 div，其顶部边距为 div 总高度的 -50%。一个工作示例：http://jsfiddle.net/jefffabiny/xXZfb/1/

【讨论】：