Vertical Align

Set the vertical alignment of an inline or table-cell element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Usage

Baseline

BaselineText

<div class="c-slate fs-md">
    <span class="p-1 bc-silver-4 bw-1 va-ba">Baseline</span>
    <span class="fs-xl">Text</span>
</div>

Middle

MiddleText

<div class="c-slate fs-md">
    <span class="p-1 bc-silver-4 bw-1 va-m">Middle</span>
    <span class="fs-xl">Text</span>
</div>

Top

TopText

<div class="c-slate fs-md">
    <span class="p-1 bc-silver-4 bw-1 va-t">Top</span>
    <span class="fs-xl">Text</span>
</div>

Bottom

BottomText

<div class="c-slate fs-md">
    <span class="p-1 bc-silver-4 bw-1 va-b">Bottom</span>
    <span class="fs-xl">Text</span>
</div>

Sub

SubText

<div class="c-slate fs-md">
    <span class="p-1 bc-silver-4 bw-1 va-s">Sub</span>
    <span class="fs-xl">Text</span>
</div>

Super

SuperText

<div class="c-slate fs-md">
    <span class="p-1 bc-silver-4 bw-1 va-su">Super</span>
    <span class="fs-xl">Text</span>
</div>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:va-*

Small≥640px

md:va-*

Medium≥768px

lg:va-*

Large≥1024px

xxl:va-*

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:va-*

Negative Values

Use negative variants to apply negative vertical align values.

Use the -- syntax to apply negative numeric values.

Syntax:va--*