vertical-align

Definition

The vertical-align CSS property is used to control the vertical alignment of inline or inline-block elements within a line of text or a containing element. It specifies how the element should align itself in relation to the surrounding content.

The vertical-align property accepts various values, including length units, percentage values, and keyword values. Here are some commonly used values:

• baseline: Aligns the element’s baseline with the baseline of the parent element or the line of text.
• top: Aligns the top of the element with the tallest element on the line or the top of the parent element’s content area.
• middle: Aligns the middle of the element with the middle of the parent element’s content area.
• bottom: Aligns the bottom of the element with the lowest element on the line or the bottom of the parent element’s content area.
• text-top: Aligns the top of the element with the top of the parent element’s font.
• text-bottom: Aligns the bottom of the element with the bottom of the parent element’s font.

Here’s an example:

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

In this example, the .inline-element class sets the vertical-align property to middle. This aligns the element vertically at the middle of the parent element’s content area.

It’s important to note that the vertical-align property affects inline or inline-block elements, such as text, images, or inline-level elements. It may not have any effect on block-level elements.

The vertical-align property is commonly used to align icons or images vertically within text, create vertical alignment of text within table cells, or adjust the vertical position of inline elements within a line of text.

Syntax

.layout {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  vertical-align: center;
}

vertical-align works across flexbox and grid layouts to position tracks or individual items along the main or cross axis.

Values

• start / end: align content to the logical start or end edge (writing-mode aware).
• center: center items or tracks along the axis.
• stretch: expand items to fill the available space when allowed.
• baseline: line up first baselines for tidy typography.

Practical Examples

.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  vertical-align: center;
  gap: 2rem;
}

Targeted alignment keeps each call-to-action centered without disturbing sibling cards.

<div class="grid gap-4 sm:grid-cols-2">
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Default alignment</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; grid-auto-rows: minmax(0, 1fr);">
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 text-white">A</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">B</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">C</span>
    </div>
  </div>
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">With vertical-align: center</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; grid-auto-rows: minmax(0, 1fr); vertical-align: center;">
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 text-white">A</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">B</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">C</span>
    </div>
  </div>
</div>

Tips & Best Practices

• Align on the container first, then reach for *-self overrides only when a child needs unique treatment.
• Prefer logical keywords (start, end) over physical directions for better localisation.
• Combine alignment with gap to manage spacing without extra wrapper elements.

Accessibility & UX Notes

Predictable alignment lowers cognitive load and lets keyboard users tab through content without unexpected jumps. Maintain visible focus indicators and ensure stretched components still provide generous hit areas.

Browser Support

align-* and justify-* properties are well supported. place-* shorthands require Chrome 59+, Edge 79+, Firefox 66+, Safari 12.1+.

Related

• gap for consistent spacing between tracks or items.
• justify-content, align-items, and place-content to coordinate both layout axes.
• flex-direction and grid-auto-flow influence which axis is treated as main vs. cross.