On 2006-11-02, Markus Ernst <derernst@NO#SP#AMgmx.chwrote:
vertical-align applies to table cells (where it does roughly what you
want) and to inline elements, where typically it only results in a small
change of position unless the line height is very high.
Quote:
I even ask myself what this property is good for...
On inline boxes it may be quite rarely used, I don't know. It describes
where the inline boxes go in relation to the line they're on; it doesn't
place them in the middle of their block.
You can theoretically vertically centre an inline box in a block with
vertical align like this:
div
{
line-height: 20em;
height: 20em;
vertical-align: middle;
}
<div>
centered text
</div>
This way the block contains one very high line. The text goes in the
middle of the line instead of on the baseline. But you can't centre a
block box this way.
But this is a terrible way to do it, because if the text needs to break
onto a second line, it overflows and goes 10em below the bottom of the
div.
Quote:
Thanks for a comment! (I know I have to fix more on this, such as the
fixed font sizes, but I would appreciate some comments about the
vertical centering stuff :-))
You can do vertical centering of block boxes in CSS using absolute
positioning quite easily provided you don't mind setting a height on the
box. If you want the box's height to "shrink-wrap" its content, and also
be centered, then as far as I know you have to use a table.
So to centre without an auto height, you need to set top, bottom and
height all to something, and top and bottom margins to auto.
for example:
div
{
position: absolute;
top: 0px;
bottom: 0px;
height: 2em;
margin: auto 0px;
background-color: red;
color: yellow;
}
<div>hello</div>
hello will be centered vertically in its containing block.
