Vertically centred text 1

[Glasgow]

This link:

http://www.w3.org/Style/Examples/007/center.html#vertical

suggests that text can be vertically centred within a <div> as follows:

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

I can't get it to work. Even the example in the link does not actually appear to be vertically centred and the HTML in the actual source uses 'height' while the example suggests 'min-height'. Am I missing something?

 

[BabyJeffy]

Am I missing something?

Worked fine for me in Fireforx1.06 for Windows. I'm picking you used IE... and IE doesn't support min-height

Jeff


[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[Glasgow]

Thanks for the reply. Yes I'm using IE. The underlying source in the link actually appears to use height, not min-height. Nevertheless the fact that the centre doesn't even seem to be correct in viewing this example suggests an IE restriction I suppose.

 

[BillyRayPreachersSon]

You can use this:

div.container {
    min-height: 10em;
    _height: 10em;
    display: table-cell;
    vertical-align: middle;
}

to fudge it so IE effectively has a min-height, but without breaking for other browsers that do.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Glasgow]

Thanks - but that seems to have no effect. What does _height do?

 

[BillyRayPreachersSon]

The underscore hack is a well-documented CSS hack that makes the succeeding property work in IE only.

IE treats height as if it were min-height most of the time, whereas trying that in other browsers (such as Firefox) can cause issues.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Glasgow]

Thanks for the explanation.

Any thoughts as to why it seems to make no difference?

 

[ChrisHunt]

I don't think IE supports [tt]display: table-cell;[/tt] either!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[rpgfan3233]

I don't think IE supports display: table-cell; either!

You would have to use an actual table cell for the table-cell effect to work in IE. Here is something I have recommended many times over:

http://garyblue.port5.com/webdev/vcenter.html

(doesn't work for all 24 hours of the day)

It's not mine, so I don't take credit for it. Basically, you wrap the DIV in a single cell table and use the @valign attribute on the cell. It is kind of a hack, but it's better than trying a bunch of CSS for weeks.

 

[Glasgow]

That's a useful workaround, thank you.