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;
}