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

时间:2012-06-21 14:46:16

标签: html css css3 css-tables

我正在尝试垂直对齐h1元素和p在div左边漂浮的中间,但它们最终彼此相邻,垂直对齐。我很确定它与表格单元格显示有关,但不知道如何在没有它的情况下垂直对齐。

我的代码给了我:

.
.
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 个答案:

答案 0 :(得分:2)

以下是一个包​​含例如http://jsfiddle.net/Z468Z/1/

的页面

我改变了你的id,在css中使用ID是一个坏习惯。

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

使用内联块对中间进行垂直对齐需要了解的内容:

  • 容器的高度和行高必须相同。
  • 你想要的孩子在中间,必须是“inline-block”类型,在这个孩子中你必须恢复正确的行高
  • 他的孩子可以是街区类型(如我的例子所示)

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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