Typography
vertical-align
Align inline content and table-cell content in their native formatting contexts.
Overview
| Class | Declarations |
|---|---|
vertical-align:baseline | vertical-align: baseline;
|
vertical-align:bottom | vertical-align: bottom;
|
vertical-align:middle | vertical-align: middle;
|
vertical-align:sub | vertical-align: sub;
|
vertical-align:super | vertical-align: super;
|
vertical-align:text-bottom | vertical-align: text-bottom;
|
vertical-align:text-top | vertical-align: text-top;
|
vertical-align:top | vertical-align: top;
|
vertical-align:<value> | vertical-align: <value>;
|
Examples
Align inline content
vertical-align positions inline-level boxes within a line. baseline uses the text baseline; middle aligns the box’s midpoint with the parent baseline plus half its x-height. It does not center a block in its parent.
Align inline content
These are actual inline boxes and table cells. The annotations are outside the formatting context and cannot become extra inline content.
<!-- vertical-align:baseline --><p id="context" class="m:0 font-md leading-lg">Text <span id="target" class="inline-block width:32px height:32px vertical-align:baseline"></span> baseline</p><!-- vertical-align:middle --><p id="context" class="m:0 font-md leading-lg">Text <span id="target" class="inline-block width:32px height:32px vertical-align:middle"></span> baseline</p>Align icons with text
Apply the utility to the inline SVG itself. The surrounding text supplies the alignment context; the icon is decorative because the words already name the control.
Align icons with text
These are actual inline boxes and table cells. The annotations are outside the formatting context and cannot become extra inline content.
<!-- vertical-align:baseline --><button type="button" id="context" class="font-md leading-lg"><svg id="target" class="inline-block width:32px height:32px vertical-align:baseline" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 5h16v14H4zM8 9h8M8 13h5" /></svg> Layers</button><!-- vertical-align:middle --><button type="button" id="context" class="font-md leading-lg"><svg id="target" class="inline-block width:32px height:32px vertical-align:middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 5h16v14H4zM8 9h8M8 13h5" /></svg> Layers</button>Align table cells
On a table cell, top, middle and bottom position the content within the row. The 128px row below makes each position visible.
Align table cells
These are actual inline boxes and table cells. The annotations are outside the formatting context and cannot become extra inline content.
<!-- One row · three cell alignments --><table class="w:100% border-collapse:collapse font-sm leading-md table-layout:fixed"> <caption class="mb-sm text-left">Cell content within a 128px row</caption> <thead><tr><th scope="col">Top</th><th scope="col">Middle</th><th scope="col">Bottom</th></tr></thead> <tbody><tr class="h:128px"> <td id="target" class="p-sm b:1px|solid|var(--color-line-base) vertical-align:top"><span id="top">Alpha</span></td> <td id="middle-cell" class="p-sm b:1px|solid|var(--color-line-base) vertical-align:middle"><span id="middle">Alpha</span></td> <td id="bottom-cell" class="p-sm b:1px|solid|var(--color-line-base) vertical-align:bottom"><span id="bottom">Alpha</span></td> </tr></tbody></table>Apply conditionally
Resize the viewport across sm. The inline square changes from baseline alignment to middle alignment; the text and square keep their sizes.
Apply conditionally
These are actual inline boxes and table cells. The annotations are outside the formatting context and cannot become extra inline content.
<!-- An inline object at a real breakpoint --><p id="context" class="m:0 font-md leading-lg">Text <span id="target" class="inline-block width:32px height:32px vertical-align:baseline vertical-align:middle@sm"></span> baseline</p>