Vertical Align

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-(<custom-property>)", "vertical-align: var(<custom-property>);"], ["align-[<value>]", "vertical-align: <value>;"], ]} />

Examples

Aligning to baseline

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

<Figure> <Example> { <div className="relative mx-auto max-w-md leading-none"> <span className="inline-block h-8 w-0 align-baseline"> <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span> <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span> </span> <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </span> </div> } </Example> </Figure>

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:

<Figure> <Example> { <div className="relative mx-auto max-w-md leading-none"> <span className="inline-block h-8 w-0 align-top"> <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span> <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span> </span> <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </span> </div> } </Example> </Figure>

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:

<Figure> <Example> { <div className="relative mx-auto max-w-md leading-none"> <span className="inline-block h-8 w-0 align-middle"> <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span> <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span> </span> <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </span> </div> } </Example> </Figure>

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:

<Figure> <Example> { <div className="relative mx-auto max-w-md leading-none"> <span className="inline-block h-8 w-0 align-bottom"> <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span> <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span> </span> <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </span> </div> } </Example> </Figure>

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:

<Figure> <Example> { <div className="relative mx-auto max-w-md leading-none"> <span className="inline-block h-8 w-0 align-text-top"> <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span> <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span> </span> <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </span> </div> } </Example> </Figure>

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:

<Figure> <Example> { <div className="relative mx-auto max-w-md leading-none"> <span className="inline-block h-8 w-0 align-text-bottom"> <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span> <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span> </span> <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </span> </div> } </Example> </Figure>

Using a custom value

<UsingACustomValue element="span" utility="align" name="vertical alignment" value="4px" variable="alignment" />

Responsive design

<ResponsiveDesign element="span" property="vertical-align" defaultClass="align-middle" featuredClass="align-top" />