Vertical alignment of inline tables

The five most popular Web browsers in 2016

are very challenged by the CSS vertical-align property when applied to tables whose CSS display property is inline.

Safari and Chrome do not step up to the challenge: they simply don't inline tables at all.

For several of the possible values of vertical-align the other three browsers do not agree, and none of the browsers does very well when compared with the very mature, very public standard.

See CSS 1 standard on vertical-align.

See CSS 2 standard on line-height and vertical-align.

There are a couple of issues that are unfortunately left up to interpretation. The browsers, usurprisingly, do silly things in these cases.

Note: specifying the border of the table (either with CSS or with the table attribute) has a pathological effect in both Firefox and Opera (but IE gets it right)

standard example conformance

unspecified vertical-align

By default, value should be baseline

baseline
A
B
baseline

FF: middle of table is on baseline. (Previous versions put bottom of table on baseline, which I thought made most sense.)

IE: like FF

Opera: middle of table is on baseline.

vertical-align: baseline

CSS1: Align the baseline (or bottom, if there is none), with enclosing baseline.

CSS2: Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

This same test was made in around 2008. There has been some change, not all of it positive. I'm dismayed at how little care has been taken by all the manufacturers.

baseline
A
B
baseline

FF: middle of table is on baseline (like default). (Previous versions put the bottom of the table on the baseline)

IE: like FF

Opera: middle of table is on baseline (like default).

vertical-align: top

CSS1: Align top of the table with top of highest item in enclosing line.

CSS2: Align the top of the aligned subtree with the top of the line box. (see note below)

baseline
A
B
baseline

FF: right (improved from prev. versions)

IE: right

Opera: right

vertical-align: bottom

CSS1: Align bottom of table with bottom of lowest item in enclosing line.

CSS2: Align the bottom of the aligned subtree with the bottom of the line box. (see note below)

baseline
A
B
baseline

FF: right

IE: this is an improvement over older versions.

Opera: seems identical to vertical-align: top

vertical-align: middle

CSS1: Place middle of table at half the enclosing font's x-height above baseline.

CSS2: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

baseline
A
B
baseline

FF: completely wrong (looks like default)

IE: now looks like FF. My notes for older versions show this being done right.

Opera: is off. middle of table is on the baseline

vertical-align: text-top

CSS1: Place top of table at the top of enclosing line's text.

CSS2: Align the top of the box with the top of the parent's content area

baseline
A
B
baseline

FF: completely wrong (looks like default)

IE: now looks like FF. My notes for older versions show this being done right.

Opera: is high, in a way I don't understand

vertical-align: text-bottom

CSS1: Place bottom of table at the bottom of enclosing line's text.

CSS2: Align the bottom of the box with the bottom of the parent's content area.

baseline
A
B
baseline

FF: completely wrong (looks like default) (I had noted that a previous version had it right.)

IE: right

Opera: wrong (looks like default)

vertical-align: super

CSS1: Standard unclear on what this should do.

CSS2: Raise the baseline of the box to the proper position for superscripts of the parent's box.

baseline
A
B
baseline

FF: not clear what it's doing -- maybe the middle of the table is at superscript height. (in previous versions, just looks like the default again.)

IE: now looks like FF.

Opera: similar to FF.

vertical-align: sub

CSS1: Standard unclear on what this should do.

CSS2: Lower the baseline of the box to the proper position for subscripts of the parent's box.

baseline
A
B
baseline

FF: maybe the middle of the table is at baseline height. (Prev. versions had the baseline of the bottom element lower than the text baseline.)

IE: now looks like FF. This is an improvement over old versions.

Opera: like IE

vertical-align: -100%

CSS1: Move the table down by one line-height

CSS2: Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.

baseline
A
B
baseline

FF: puts the top of the table at the baseline of the text. Inconsistent with baseline FF: puts the middle of the table on the baseline.

IE: like FF

Opera moves it the right amount, but since it started out with the table's middle on the baseline, the effect is quite wrong.

CSS2 note on values top and bottom:
The following values align the element relative to the line box. Since the element may have children aligned relative to it (which in turn may have descendants aligned relative to them), these values use the bounds of the aligned subtree. The aligned subtree of an inline element contains that element and the aligned subtrees of all children inline elements whose computed 'vertical-align' value is not 'top' or 'bottom'. The top of the aligned subtree is the highest of the tops of the boxes in the subtree, and the bottom is analogous.