Vertically align a heading and a paragraph in a div

Question

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

Here are the jsfiddle: jsfiddle

Look at this question: [link](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div), and this useful resources: [link](http://phrogz.net/CSS/vertical-align/index.html) — yudayyy, Jun 21 '12 at 14:58

dievardump · Answer 1 · 2012-06-21T16:05:28.660

3

Here is a page with an exemple : http://jsfiddle.net/Z468Z/1/

I changed your id by a class, using ID in css is a bad habit.

I personaly prefer inline-block as table/table-row/table-cell display.

What you have to know to vertical-align middle with inline-block :

the container must have height and line-height at the same size.
the child you want at the middle, must be the type "inline-block", in this child you must restore proper line-height
his children can be block types ( as in my example )

edited Jun 21 '12 at 16:05

answered Jun 21 '12 at 15:11

dievardump

2,484
17
21

Thanks DieVarDump, i like this as it not using table-cell display – davey Jun 22 '12 at 07:32

score 2 · Accepted Answer · answered Jun 21 '12 at 14:49

2

You have to vertically align the div that contains them (or place them inside another div and place that in original div).

answered Jun 21 '12 at 14:49

Fewfre

1,461
3
19
32

Thanks Kyomu i place it in another div and vertically aligned it. – davey Jun 21 '12 at 15:07

score 0 · Answer 3 · answered Jun 21 '12 at 14:51

0

This Page Explains and shows a method of vertical alignment towards the bottom.

answered Jun 21 '12 at 14:51

Gonzy

143
1
1
9

score 0 · Answer 4 · answered Jun 21 '12 at 14:58

To properly vertical center elements, you need to have an absolute positioned div that is 50% of the height from the top, and then an offset div with a margin-top of -50% total height of the div. A working example: http://jsfiddle.net/jefffabiny/xXZfb/1/

Vertically align a heading and a paragraph in a div

4 Answers4