我正在尝试垂直对齐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
答案 0 :(得分:2)
以下是一个包含例如http://jsfiddle.net/Z468Z/1/
的页面我改变了你的id,在css中使用ID是一个坏习惯。
我个人更喜欢内联块作为表/表行/表格单元格显示。
使用内联块对中间进行垂直对齐需要了解的内容:
答案 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/