# vertical-align

> Applies `vertical-align`, e.g.

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

Applies `vertical-align`, e.g. for aligning an inline-block icon against
adjacent text.

## 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:

```tsx
<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:

```tsx
<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.

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

## Responsive design

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

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

## Signature

```ts
u.verticalAlign(value: VerticalAlignValue)
```