0

我试图垂直对齐一个 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

4

4 回答 4

3

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

我通过一个类更改了您的 id，在 css 中使用 ID 是一个坏习惯。

我个人更喜欢内联块作为表格/表格行/表格单元格显示。

使用 inline-block 垂直对齐中间您必须知道的内容：

  • 容器必须具有相同大小的高度和行高。
  • 你想要在中间的孩子，必须是“inline-block”类型，在这个孩子中你必须恢复正确的行高
  • 他的孩子可以是块类型（如我的例子）
于 2012-06-21T15:11:46.033 回答
2

您必须垂直对齐包含它们的 div（或将它们放在另一个 div 中并将其放置在原始 div 中）。

于 2012-06-21T14:49:45.687 回答
0

This Page Explains and shows a method of vertical alignment towards the bottom.

于 2012-06-21T14:51:14.750 回答
0

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

于 2012-06-21T14:58:28.503 回答