Centering Inline Elements Vertically in their Containers

Submitted by gary.turner on Thu, 2008-09-25 04:08

Back a week or so ago, say in May of 2006, Chris..S brought a problem to the forum, http://csscreator.com/node/16105

In a nutshell, he needed to have multi-line inline elements align themselves centered vertically in the container. Not a problem with modern browsers, but not so easy with IE.

The problem was solved when IChao (Ingo Chao*) brought an example and an explanation of some work done by Bruno Fasino.

Chris posted a nice demo page, which he seems to have taken down. I've been meaning to do a better write up than my original bald demo, and finally got around to it today.

I have uploaded it to my site: vertically centering inline elements. All the demos seem to work OK in Firefox 2&3, IE 6&7, Opera 9.52, and Safari 3.1.2-Win. Please give it a once over, and let me know of any errors, typos or gobbledygook.

cheers,

gary

* In case you haven't noticed, Ingo has written a book, Advanced CSS techniques including CSS debugging: Advanced CSS techniques, complex CSS layouts, navigation lists, multi-column layouts, debugging interlocked u.v.m (bound expenditure). (I couldn't figure where the title stopped and the blurb began :shrug:) If you read German, anything he writes is worth reading.

Tony tinyurled the link

If I may be so bold as to

Submitted by Hugo on Thu, 2008-09-25 06:19.

If I may be so bold as to critique this - and it might be a case that it is too early in the morning for brain to engage - but is it not possible to provide a little more clarity as to the approach taken to provide the IE fix.

Dang-it, Hugo!

Submitted by gary.turner on Fri, 2008-09-26 05:50.

I was really trying to avoid that, being as I didn't fully understand what was going on. Well, I think I do now. Take another look.

cheers,

gary

Exactly what I had in mind,

Submitted by Hugo on Fri, 2008-09-26 06:17.

Exactly what I had in mind, it flows well as an explanation along with examples, nicely done. One minor point my proportional font was set to 13px which rendered the 'pre' text far too small to be legible without adjusting up, which of course is easy enough to do, however...

Messin' with defaults

Submitted by gary.turner on Tue, 2008-09-30 23:13.

Hugo wrote:

… One minor point my proportional font was set to 13px which rendered the 'pre' text far too small to be legible without adjusting up, which of course is easy enough to do, however...

No easy out on that, Hugo. If I don't reduce it a bit, IE has gawd-awful overflow issues at their default values. I figure if you're smart enough to mess with your defaults, you deserve what you get.