CSS vertical-align Property

What You’ll Learn

The vertical-align property controls how inline elements sit next to text — perfect for icons, badges, subscripts, and table cells.

Introduction

The vertical-align property in CSS controls how inline elements are aligned vertically relative to their parent element or to the line box.

This property is particularly useful for aligning text and other inline elements within a line of text or within a table cell.

Definition and Usage

Apply vertical-align to inline-level elements (such as span, img, and input), inline-block elements, or table cells (td, th). It adjusts position along the vertical axis within a line or cell — not the whole block on the page.

📝 Syntax

The syntax for the vertical-align property is straightforward. It can be applied to inline or table-cell elements, and you can specify various alignment values.

element {
  vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;
}

Basic Example

.inline-img {
  vertical-align: middle;
}

Syntax Rules

• Works on inline, inline-block, and table-cell elements.
• One keyword, length, or percentage value at a time.
• Length and percentage values shift the element relative to the baseline.
• For table cells, top, middle, and bottom refer to the cell box.
• The property is not inherited.

Related Properties

• line-height — controls line box height around inline content
• text-align — horizontal alignment (often paired in tables)
• display — change to inline-block or table-cell when needed
• align-items — flexbox alternative for block-level vertical centering

🎯 Default Value

The default value of vertical-align is baseline, which aligns the baseline of the element with the baseline of its parent.

💎 Property Values

The vertical-align property accepts keyword values, lengths, and percentages.

When to Use vertical-align

vertical-align is helpful whenever inline content needs fine vertical tuning:

• Icons beside labels — Align small images or SVGs with button or link text.
• Subscripts and superscripts — Format formulas (H₂O) or footnote markers without semantic tags.
• Inline badges — Position status chips next to headings or sentences.
• Table cells — Vertically center or pin content to the top or bottom of a cell.
• Form controls — Nudge checkboxes or inputs to line up with adjacent text.

Examples Gallery

In this example, we’ll use the vertical-align property to align text and images vertically within a line of text.

<style>
  .inline-img {
    vertical-align: middle;
  }
</style>

<p>
  <img src="image.png" alt="Example Image" class="inline-img">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

.sub { vertical-align: sub; font-size: 0.75em; }
.super { vertical-align: super; font-size: 0.75em; }

.baseline { vertical-align: baseline; }
.middle { vertical-align: middle; }
.top { vertical-align: top; }

.cell-top { vertical-align: top; }
.cell-middle { vertical-align: middle; }
.cell-bottom { vertical-align: bottom; }

♿ Accessibility

• Prefer semantic tags — Use <sub> and <sup> for meaningful subscripts and superscripts when appropriate.
• Keep readable line height — Extreme vertical-align offsets can make text harder to read for low-vision users.
• Alt text on inline images — Decorative icons should use empty alt (alt=""); meaningful icons need descriptive alt text.
• Do not rely on alignment alone — Ensure meaning is clear from text content, not just visual position.

vertical-align + display

If an element is block-level by default, change its display before vertical-align can take effect inline. For whole-component centering, flexbox is usually the better tool.

.badge {
  display: inline-block;
  vertical-align: middle;
  padding: 0.2rem 0.5rem;
}

💡 Best Practices