文字與排版

垂直對齊vertical-align

Setting vertical alignment.

Examples

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

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

Generated CSS

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

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>

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 styles based on different states using selectors and conditional queries.

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

Controlling how text inside an element is wrapped.

Controlling how whitespace and line breaks within an element are handled.