[ @sdxc/u/typography ]

vertical-align

Applies vertical-align, e.g.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { verticalAlign } from "@sdxc/u/typography";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.verticalAlign("middle")`	`css({ verticalAlign: "middle" })`

Examples

Basic example

Use verticalAlign(value), like verticalAlign("middle") or verticalAlign("top"), to place an inline element against the line it sits in:

verticalAlign("baseline")

verticalAlign("top")

verticalAlign("middle")

verticalAlign("bottom")

<div mix={[leading("4rem"), ...]}>
	<p mix={[...]}>
		<span mix={[verticalAlign("baseline"), inlineBlock(), is(4), bs(4), ...]} />{" "}
		verticalAlign("baseline")
	</p>
	<p mix={[...]}>
		<span mix={[verticalAlign("top"), inlineBlock(), is(4), bs(4), ...]} />{" "}
		verticalAlign("top")
	</p>
	<p mix={[...]}>
		<span mix={[verticalAlign("middle"), inlineBlock(), is(4), bs(4), ...]} />{" "}
		verticalAlign("middle")
	</p>
	<p mix={[...]}>
		<span mix={[verticalAlign("bottom"), inlineBlock(), is(4), bs(4), ...]} />{" "}
		verticalAlign("bottom")
	</p>
</div>

Subscript and superscript

Use verticalAlign("sub") and verticalAlign("super") to lower or raise text off the baseline:

Water is H2O, and E = mc2.

<p mix={[text("2xl")]}>
	Water is H<span mix={[verticalAlign("sub"), fontSize("sm")]}>2</span>O, and E = mc
	<span mix={[verticalAlign("super"), fontSize("sm")]}>2</span>.
</p>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.verticalAlign("middle"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.verticalAlign("middle"))

Signature

u.verticalAlign(value: VerticalAlignValue)