This is one of those really annoying CSS bugs that should be so simple to do but is actually fairly problematic because of old browsers like IE6. Vertical-align should be all that’s needed but nope, certain browsers like IE6 don’t support it so we need to do some wizardry to get it to work cross browser. In this post I will talk about one lines and the more tricky wrapping of text.
Before I begin it is important to understand that the parent of a positioned child must also be positioned. In easy-to-understand terms that means the immediate outer div must have a position set for the inner positioned div to correctly work.
For one line of text I would make sure the parent element had a position of relative and then use the following code:
