= CSS vertical alignment
{c}
<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.<Visual formatting model details in CSS 2.2 by W3C>[§10.8, vertical-align definition and applicable contexts]{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.
Back to article page
