Question

When you have two inline elements that share the same line, and the bigger one is vertical-align: baseline and the smaller one is vertical-align: middle why does the middle aligned element appear below the baseline element?

I’ve put together a demo illustrating what I’m talking about:
http://jsfiddle.net/mLSG2/

It appears that the smaller element’s mid-line is aligned to the larger elements baseline, but that doesn’t seems to make much sense to me. If this is true, what is the rational behind it?

More generally, can someone explain how alignment is calculated when elements of varying line-heights and varying vertical alignment declarations share the same line? Is there a place in the spec that defines this?

Answer 1

By the specification, vertical-align: middle should “align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent”. In this case, the vertical middle of the line box for the italic text should be aligned to the baseline of the div element plus half the x-height of that element. This makes it rather close to that baseline, really.

Since fonts are not set here, browsers will typically use a default font size like 16px. The x-height depends on font, but let’s assume the rough average: half of the font size, 8px. Half of that makes 4px, making the difference rather small. (The font size of the div element is not changed by the presence of inner elements with larger font size.)

The situation may be obscured by browser bugs. The vertical-align property has a buggy history. Often it’s better to use relative positioning.