vertical-align.mdx

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "vertical-align"; export const description = "Utilities for controlling the vertical alignment of an inline or table-cell box.";

<ApiTable rows={[ ["align-baseline", "vertical-align: baseline;"], ["align-top", "vertical-align: top;"], ["align-middle", "vertical-align: middle;"], ["align-bottom", "vertical-align: bottom;"], ["align-text-top", "vertical-align: text-top;"], ["align-text-bottom", "vertical-align: text-bottom;"], ["align-sub", "vertical-align: sub;"], ["align-super", "vertical-align: super;"], ["align-()", "vertical-align: var();"], ["align-[]", "vertical-align: ;"], ]} />

Examples

Aligning to baseline

Use the align-baseline utility to align the baseline of an element with the baseline of its parent:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:align-baseline] -->
<span class="inline-block align-baseline">The quick brown fox...</span>

Aligning to top

Use the align-top utility to align the top of an element and its descendants with the top of the entire line:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:align-top] -->
<span class="inline-block align-top">The quick brown fox...</span>

Aligning to middle

Use the align-middle utility to align the middle of an element with the baseline plus half the x-height of the parent:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:align-middle] -->
<span class="inline-block align-middle">The quick brown fox...</span>

Aligning to bottom

Use the align-bottom utility to align the bottom of an element and its descendants with the bottom of the entire line:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:align-bottom] -->
<span class="inline-block align-bottom">The quick brown fox...</span>

Aligning to parent top

Use the align-text-top utility to align the top of an element with the top of the parent element's font:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:align-text-top] -->
<span class="inline-block align-text-top">The quick brown fox...</span>

Aligning to parent bottom

Use the align-text-bottom utility to align the bottom of an element with the bottom of the parent element's font:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:align-text-bottom] -->
<span class="inline-block align-text-bottom">The quick brown fox...</span>

Using a custom value

Responsive design