 CSS vertical alignment

CSS vertical alignment concerns the vertical-align property in its applicable formatting contexts. For inline-level content, it aligns boxes relative to the line and neighboring text metrics; on table cells, it controls alignment of cell content under the table rules. The relevant reference is therefore determined by context.^[ref]

For an inline image with zero margins, vertical-align: middle aligns the image's vertical midpoint with the parent's text baseline plus half the parent's x-height. It does not generally place the midpoint on the baseline itself.

A numerical example makes that offset visible. Measure height upward from a parent baseline at zero, and let the parent's x-height be ten pixels. A 20-pixel-high image aligned middle has its centre at $5$, its top at $15$ and its bottom at $-5$ CSS pixels. Aligning its centre at zero would produce a different placement.

A positive length such as vertical-align: 4px raises the applicable inline box from its baseline-aligned position; keywords such as top and bottom use specified line-box relationships instead. These placements contribute to the extent required by a CSS line box, so changing alignment can affect the line as well as one item.

To interpret a result, identify the element's generated box, its margins and the surrounding text metrics. CSS vertical alignment is not a general instruction that centers any arbitrary child inside any arbitrary block container.