On 2006-11-02, Markus Ernst <derernst@NO#SP#AMgmx.chwrote:
Hello
This is a test example:
http://www.markusernst.ch/anthracite/
http://www.markusernst.ch/anthracite/living_divani.html
After googling and experimenting for several hours, I ended up doing
this demo with tables. The main problems are the vertical centering of
the info area, and of the text inside the squares.
Is it possible to do this without tables? Vertical-align:middle does not
seem to be supported by any browser;
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.
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.
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.
