CSS : How do I vertically-center align text in a div ? (or any other elements which is not a table)

Question

To vertically-center align text in a table-cell, I use vertical-align: middle in the td.

But the above doesn't work with divs, spans, header and other non-table elements. So how can I vertically-center align text in such elements ?

Look at this http://www.wpdfd.com/editorial/thebox/deadcentre4.html — The Disintegrator, Aug 25 '09 at 08:56

score 2 · Answer 1 · answered Aug 25 '09 at 08:53

2

If it's a single line of text, you can set the line height to be the same height as the element.

answered Aug 25 '09 at 08:53

Guffa

687,336
108
737
1,005

score 2 · Accepted Answer · answered Aug 25 '09 at 08:53

2

There are many possibilities, each with it's advantages and drawbacks.

Here's a good article by Douglas Heriot explaining 5 others methods, and comparing them.

answered Aug 25 '09 at 08:53

Bruno Reis

37,201
11
119
156

the link is dead – canbax May 06 '20 at 06:40

score 0 · Answer 3 · answered Aug 25 '09 at 08:38

Just use the following style :

<style type="text/css">
    div {
            vertical-align: middle;
            display: table-cell;
        }
</style>

That way, you are "displaying" the div as a table-cell and since vertical-align works with table-cells, you're text will be center-vertically aligned.

CSS : How do I vertically-center align text in a div ? (or any other elements which is not a table)

3 Answers3