Vertically align a heading and a paragraph in a div
- by davey
I'm trying to vertically align a h1 element and p in the middle of a div floated left but they end up next to each other vertically aligned. Im pretty sure it to do with the table-cell display but don't know how to vertically align without it.
my code gives me:
.
.
Heading Paragraph
.
.
I want:
.
.
Heading
Paragraph
.
.
heres my code:
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;
}
