Go Back to Dynamic Site Solutions :: CSS
In the examples the left elements has its line-height set to its height; the
right elements have the normal line-height. For example 2 the image
<img>) in the left element also have
vertical-align:middle. Example 4 shows that this technique does
not work if there is more than one line box in the element.
Example 1 works in IE5+/Win, Firefox, Netscape 6+, Opera 6+, Safari, Konqueror 3, and IE5/Mac. Example 2 works in Firefox, Netscape 6+, Opera 7.5+, Safari, Konqueror 3, and IE5/Mac but not in IE/Win. Example 3 is the same as example 2 except it has a few extra rules in the stylesheet that is in the conditional comment that makes it work in IE5+/Win.
There's one other thing I should mention. This technique doesn't work to
vertically center inline, replaced elements, e.g.
when a browser is in Almost Standards Mode, which is triggered by a complete,
DOCTYPE. There is an alternative, however. You can
give the parent of the
vertical-align: middle. This is shown in Example 5. (IE5-7 do
display:table-cell, nor do they have an Almost
Standards Mode, so you still need the workaround for them.) There is another
issue you might run into. An element with
in a browser that supports
display:table-cell can't be floated.
Line-height/ Replaced Element Bug