Struggling to align a h1 element and p vertically in the middle of a left-floated div, but they end up next to each other aligned vertically. Seems like table-cell display is the culprit, but not sure how to achieve vertical alignment without it.
The current output:
.
.
Heading Paragraph
.
.
Desired output:
.
.
Heading
Paragraph
.
.
Code snippet provided below:
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;
}
Check out the jsfiddle for reference: jsfiddle