vertical-align

Setting vertical alignment.

Overview

Examples

Align inline content

Use vertical-align:* to align inline-level or table-cell content along the inline formatting context.

<span class="vertical-align:middle">Aligned text</span>

@layer utilities {    .vertical-align\:middle {        vertical-align: middle    }}

Align icons with text

Use vertical-align:middle, vertical-align:text-bottom, or vertical-align:text-top to tune inline icons next to text.

<svg class="inline-block size:1em vertical-align:text-bottom" aria-hidden="true"></svg><span>Download</span>

Align table cells

Use vertical alignment on table cells when content should sit at the top, middle, or bottom of the row.

<td class="table-cell vertical-align:top">Long cell content</td>

vertical-align does not align flex or grid items. Use align-items, align-self, or place-items for those layouts.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="vertical-align:baseline vertical-align:middle@sm vertical-align:top@print">...</div>