When it comes to vertical alignments for web contents, CSS 2.0 doesn’t help as it was not supported by its nature. There are quite a few Vertical Alignment with CSS hacks out there but frankly speaking, none of them are clean cut and most importantly, works awkwardly in IE.
I’d been dealing with such problem quite a while and also coping with strict customer requirements such as IE6 and minimal structural modifications on HTML. Luckily, an example from Katz Web Services came to the rescue. It was the best solution I see so far (with minimal codes). The original example was encapsulated into a JQuery plugin which can be easily implemented. Anyway, what I want to mention is that, the core sets the “margin-top” CSS property by calculating the distances between the element and the element’s parent, then halved.
In my scenario, instead of applying JQuery, I created a new class defining the “margin-top” property, then apply the class across elements to be vertically aligned. I utilized CSS expression to dynamically calculate the selected element’s and its parent’s height, then do the calculations.
.valign-center
{
margin-top:expression(((this.parentNode.clientHeight-this.clientHeight)/2) +”px”);
}
I found that CSS “expression” property is quite handy when dealing with situations such as non fixed widths and heights. Too bad that such property works only on IE (Though I only need to deal this on IE6). So, to deploy such method for cross browser compatibality, the best way would still be applying the JQuery plugin by Katz Web Services. Anyway, it’s still a lovely solution that eases my pain. 
Oh yeah, CSS3 is going to support for vertical alignments. Just hope that future web browsers could adopt it well…
i din know there is such thing called css expressions. But hopefully, we won’t have to use it very soon cause this is only pertaining to “crappy browser”
Hello. This is kind of an “unconventional” question , but have some other visitors asked you how have the menu bar to appear such as you’ve got it? I also have a blog and am really planning to transform around the design, however I am terrified to death to mess with it for fear of the search engines punishing me. I’m very not used to all of this …so i am just not optimistic the best way to try to to it all yet. I’ll just keep working on it one day at a time Thanks for any help you can offer here
The “crappy browser” is widely used by rich companies
grow taller…
[...]The Pain of Vertical Alignments with CSS « Ph@ntoM[...]…