Tailwind CSS Vertical Align Cheatsheet

Complete reference for Tailwind v4 vertical-align utilities.
Click any class to copy it to your clipboard.

Quick Reference

Class	CSS Property	Description
align-baseline	vertical-align: baseline	Aligns the baseline of the element with the baseline of its parent
align-top	vertical-align: top	Aligns the top of the element with the top of the tallest element on the line
align-middle	vertical-align: middle	Aligns the middle of the element with the baseline plus half the x-height of the parent
align-bottom	vertical-align: bottom	Aligns the bottom of the element with the bottom of the lowest element on the line
align-text-top	vertical-align: text-top	Aligns the top of the element with the top of the parent element's font
align-text-bottom	vertical-align: text-bottom	Aligns the bottom of the element with the bottom of the parent element's font
align-sub	vertical-align: sub	Aligns the baseline of the element with the subscript-baseline of its parent
align-super	vertical-align: super	Aligns the baseline of the element with the superscript-baseline of its parent

Inline Elements Demo

See how vertical-align affects inline elements and images relative to text.

align-baseline

vertical-align: baseline

Text beforetext after(box is baseline)

align-top

vertical-align: top

Text beforetext after(box is top)

align-middle

vertical-align: middle

Text beforetext after(box is middle)

align-bottom

vertical-align: bottom

Text beforetext after(box is bottom)

align-text-top

vertical-align: text-top

Text beforetext after(box is text-top)

align-text-bottom

vertical-align: text-bottom

Text beforetext after(box is text-bottom)

align-sub

vertical-align: sub

Text beforetext after(box is sub)

align-super

vertical-align: super

Text beforetext after(box is super)

Table Cell Alignment

Vertical align is especially useful for table cells. Here's how each utility affects cell content.

Class	Demo Cell (fixed height)	Action
`align-baseline`	Cell content
`align-top`	Cell content
`align-middle`	Cell content
`align-bottom`	Cell content

Image Alignment with Text

Common use case: aligning icons or images inline with text.

align-baseline

Click theicon to view

align-top

Click theicon to view

align-middle

Click theicon to view

align-bottom

Click theicon to view

Subscript & Superscript

Perfect for mathematical notation, footnotes, or trademark symbols.

align-sub

H2O(Water)

CO2(Carbon Dioxide)

align-super

E = mc2(Einstein's equation)

xn + yn(Power notation)

Text-Top vs Text-Bottom

These align relative to the parent's font, not the line box.

align-text-top

BigsmallText

align-text-bottom

BigsmallText

Common Use Cases

Icon with Button Text

<button>
  <svg class="inline align-middle
       w-4 h-4 mr-2">...</svg>
  Click me
</button>

Badge with Text

<span>
  New Feature
  <span class="align-super text-xs
       bg-red-500 text-white
       px-1 rounded">NEW</span>
</span>

Avatar in Text

<p>
  Posted by
  <img class="inline align-middle
       w-6 h-6 rounded-full mx-1"
       src="..." />
  John Doe
</p>

Chemical Formula

<span>
  H<span class="align-sub text-sm">2</span>
  SO<span class="align-sub text-sm">4</span>
</span>

About Vertical Align

The vertical-align property only works on inline, inline-block, and table-cell elements. It does not work on block-level elements.

For centering content vertically in flex or grid containers, use Tailwind's flexbox utilities like items-center instead.

For arbitrary values, use Tailwind's arbitrary value syntax: align-[4px] or align-[10%]

See Tailwind alignment on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect vertical alignment, spacing, typography, and more with just one click.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →