Isn't no way to vertical align text inside a div with fixed height?

Question

Possible Duplicate:
Using jQuery to center a DIV on the screen

I know it works with table, but nowdays there is no way to auto vertical align (in the center) text? I can't believe it...

My code :

HTML

<div class="content">
    This is my text
</div>

CSS

.content
{
    width:80px;
    height:150px;    
    background-color:#aeaeae;
}

Chris · Answer 1 · 2012-09-26T18:33:06.270

4

Add display: table-cell; vertical-align: middle; to your div, demo: little link.

For this to work on IE7, you can use this: another little link. It detects when your browser is IE6/7, and replaces elements with display: table-*; with actual HTML tables.

edited Sep 26 '12 at 18:33

answered Sep 26 '12 at 13:31

Chris

26,544
5
58
71

SO answers should be more "self-contained", not dependent upon the status of external links to stay useful. – Sparky Sep 26 '12 at 13:43
@Sparky672 The external link is a link to a plugin. Should I just post the contents of the HTC in my answer? – Chris Sep 26 '12 at 13:45
@Abody97 Why do you prefer meaningless link text? – Marat Tanalin Sep 26 '12 at 23:07

score 1 · Answer 2 · answered Sep 26 '12 at 13:38

1

Here's a site with multiple options and the assessments of each. I've used the table based one with good success.

http://css-tricks.com/vertically-center-multi-lined-text/

answered Sep 26 '12 at 13:38

Matt Whipple

7,034
1
23
34

SO answers should be more "self-contained", not dependent upon the status of external links to stay useful. – Sparky Sep 26 '12 at 13:43

score 0 · Answer 3 · answered Sep 26 '12 at 13:31

0

.content
{
    width:80px;
    height:150px;    
    background-color:#aeaeae;
    display:table-cell;
    vertical-align:middle;
}

This should help

answered Sep 26 '12 at 13:31

dan_fides

324
1
10

1

Yeah, that won't work on IE7! – markzzz Sep 26 '12 at 13:33
OK, but nothing was said about supporting so ancient versions of IE. And by default, I think, IE8+ is quite enough. – dan_fides Sep 26 '12 at 14:02

Isn't no way to vertical align text inside a div with fixed height?

HTML

CSS

3 Answers3