Vertical Align

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

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

Chrome

Edge

Firefox

Safari

Usage

BaselineText

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

MiddleText

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

TopText

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

BottomText

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

SubText

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

SuperText

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

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

Target viewport sizes with breakpoint prefixes.

sm:va-[value]

Small≥640px

md:va-[value]

Medium≥768px

lg:va-[value]

Large≥1024px

xxl:va-[value]

Extra Large≥1536px

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-[value]