Why is vertical centering such a pain in the ass?

[Ciaran]

What ever happened to the easy idea that you could just tag something
valign='middle' and it would align to the middle of the cell?? Don't
get me wrong, CSS is a dream come true for anyone who's worked without
it and I'm well used to the ins and outs of it by now but some things
that used to be so easy are just such a pain in the ass now!
Can someone please give me a hand vertical centering this bit of text
in a div without extra markup?

<div style="border-top: solid 1px #999999;text-align:center; font-size:
7pt; height:3%;>bit of text</div>

I've tried, vertical align, line height, various display rules,
padding values and position:relative.

Something as basic as this really should not be this difficult to pull
off!
Cheers,
Ciarán

 

[John Hosking]

Can someone please give me a hand vertical centering this bit of text
in a div without extra markup?

<div style="border-top: solid 1px #999999;text-align:center; font-size:
7pt; height:3%;>bit of text</div>

I've tried, vertical align, line height, various display rules,
padding values and position:relative.

Does this help you?
http://www.student.oulu.fi/~laurirai/www/css/middle/

 

[Ciaran]

Does this help you?http://www.student.oulu.fi/~laurirai/www/css/middle/

Not really John but thanks for the reply. I've seen that page before
and tried all those things on the code snippet above but nothing
works. I'm more interested in why it has to be so complicated than
finding a solution to that problem. I mean I can do it with an extra
bit of markup if I need to but I'm digging my heels in here. It should
not be this messy to do something so simple.


Ciaran

 

[dorayme]

I mean I can do it with an extra
bit of markup if I need to but I'm digging my heels in here. It should
not be this messy to do something so simple.

If it is just a bit of extra markup, why cut off your nose to
spite your face? It is indeed a great frustration that the world
is not more perfect than it is. On this particular matter, you
might consider that implementing what you want might not be so
simple a task.

Ever gotten frustrated at the timing of traffic lights on your
route? It would be simple enough, you think, to not have it so
you have to stop at so many considering you are going at a legal
and moderate speed. But coordinating that with thew cross flow
traffic routes is a major headache for trafficc engineers.

OK, that is one point. The other is this, it may not be so
important to be doing this vertical centering. And where it is,
there are ways to be getting by.

 

[Ben C]

Not really John but thanks for the reply. I've seen that page before
and tried all those things on the code snippet above but nothing
works. I'm more interested in why it has to be so complicated than
finding a solution to that problem. I mean I can do it with an extra
bit of markup if I need to but I'm digging my heels in here. It should
not be this messy to do something so simple.

It's true they could have provided some way to vertically centre an
absolutely positioned box while letting it have a height based on
content. A small change to section 10.6.4 paragraph 3 is all it would
take.

If you allow vertical centering everywhere things do start to get
complex, particularly if the vertically centered text is flowing around
floats that start in nearby blocks, since those would affect its height,
which would affect its position (because it's centered), which means it
now flows differently around the floats, affecting its height, which
would affect its position... What are the chances of IE ever getting
something like that right? Better not to set the bar too high.

But it's not often that vertical centering is particularly useful I
think since everything tends to flow downwards off the bottom of the
viewport anyway.