How `vertical-align` Works in CSS for Text Next to Images

By the end of this page, you will understand what vertical-align actually does in CSS, why it only works in certain layout contexts, and why middle does not mean “perfect visual centering.” You will also learn reliable ways to align text next to images using inline alignment and modern layout tools like Flexbox.

vertical-align is one of the most misunderstood CSS properties. Many beginners expect it to vertically center any element inside its container, but that is not what it does.

In this example, the image and the text are participating in inline layout. Inline elements sit on a text line, and CSS aligns them relative to the line's baseline, x-height, and other font metrics.

What vertical-align actually affects

vertical-align works on:

• inline elements
• inline-block elements
• table-cell elements

It does not vertically center normal block elements inside a container.

Why top appears to work

vertical-align: top aligns the top of the element with the top of the tallest item in that line box. This often creates a clearly visible shift.

Why middle seems not to work

vertical-align: middle does not mean “center this element exactly in relation to the image.” In inline layout, middle aligns the element's vertical midpoint with the parent's baseline plus half the x-height of the parent font.

That means:

• it is based on text metrics, not the image box

Think of inline elements like people standing on the same floor line during a group photo.

• The baseline is the floor they stand on.
• vertical-align: top lines up their heads at the same top edge.
• vertical-align: middle does not mean “put everyone in the exact center of the photo.”
• Instead, it aligns each person according to a typography-based reference point.

So if one person is an image and another is text, middle may not look visually centered because they are being aligned by text rules, not by simple box geometry.

If you want true box-based centering, think of Flexbox as placing the image and text in a container that says: “stand in the center of the row together.”

Basic syntax

selector {
  vertical-align: baseline | middle | top | bottom;
}

Example 1: Align image and text in the same inline line

<div>
  <img src="https://via.placeholder.com/30" alt="icon">
  <span>Hello</span>
</div>

img,
span {
  vertical-align: middle;
}

This works because both the img and span are inline-level elements on the same line.

Example 2: Why applying it to only one element may be unclear

span {
  vertical-align: middle;
}

This tells only the span to align itself differently relative to the line box. The image keeps its normal alignment, so the result may be hard to notice.

Example 3: Reliable centering with Flexbox

Consider this example:

<div>
  <img src="https://via.placeholder.com/30" alt="icon">
  <span>Text</span>
</div>

img,
span {
  vertical-align: middle;
}

Step by step

1. The browser creates a line of inline content inside the div.
2. The img is treated like an inline replaced element.
3. The span is treated like an inline text container.
4. Both elements are placed on the same line box.
5. vertical-align: middle tells each element to align relative to the line's text metrics.
6. The browser calculates the baseline and x-height from the font.
7. The elements shift slightly so their middles align to that text-based reference.

What surprises beginners

The alignment is not based on:

• the exact height of the image
• the exact height of the text box
• the height of the

Where vertical-align is useful

• Icons inside text: aligning a small icon with surrounding text
• Inline badges: aligning a status badge with a label
• Form elements: adjusting checkboxes, radios, or small controls next to text
• Table cells: vertically aligning content within table-like layouts
• Inline images in articles: making small images sit nicely with text

Where it is often the wrong tool

• centering content inside a card
• vertically centering items in a navbar
• aligning content inside large containers
• full component layout

For these tasks, developers usually use:

• Flexbox
• Grid
• line-height tricks in very limited cases

Example: icon with button text

<button class="btn">
  <img src="https://via.placeholder.com/16" alt="save icon">
  Save
</button>

.btn img {
  vertical-align: middle;
}

This can help when the image is inline with the text.

In real projects, developers usually choose alignment methods based on the layout context.

Common pattern: use vertical-align for small inline adjustments

.icon {
  vertical-align: middle;
}

This is common when an icon appears inside a sentence or next to a short label.

Common pattern: use Flexbox for component layout

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

This is common for:

• avatars and usernames
• buttons with icons
• status rows
• menu items

Guard-clause mindset for CSS decisions

Developers often think like this:

• Is this inline text-level alignment? Use vertical-align if needed.
• Is this a reusable UI component? Use Flexbox.
• Is this table-like data? vertical-align on table cells may be appropriate.

Real maintenance benefit

Using the right tool reduces:

• browser inconsistencies
• magic spacing fixes
• unexplained margin-top hacks

1. Thinking vertical-align: middle centers inside a block container

Broken expectation:

<div class="box">
  <span>Hello</span>
</div>

.box {
  height: 100px;
}

span {
  vertical-align: middle;
}

Why it fails:

• vertical-align does not center the span inside the div just because the div is taller.

Use Flexbox instead:

.box {
  display: flex;
  align-items: center;
  height: 100px;
}

2. Applying vertical-align to the wrong display type

Quick rules

• vertical-align works on inline, inline-block, and table-cell elements.
• It does not vertically center regular block elements inside containers.
• middle in inline layout is based on font metrics, not box geometry.
• For image + text UI alignment, Flexbox is often easier.

Common syntax

img,
span {
  vertical-align: middle;
}

.container {
  display: flex;
  align-items: center;
}

When to use what

• Small icon inside text: vertical-align
• Avatar next to username: Flexbox
• Center content in a box: Flexbox or Grid
• Table-like cell alignment: vertical-align on table cells

Common values

vertical-align: baseline;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

Key edge case

If vertical-align: middle “does nothing,” check:

Why does vertical-align: middle not center text beside an image?

Because in inline layout, middle uses text metrics such as the baseline and x-height. It does not center based on the image's box height.

Why does vertical-align: top seem to work better?

Top alignment usually creates a stronger visible shift, so the effect is easier to notice.

Should I apply vertical-align to the image or the text?

Usually both related inline elements should share the alignment rule if you want them aligned consistently.

Does vertical-align work on div elements?

Not in the usual block-layout sense. It mainly affects inline-level elements and table cells.

What is the best modern way to align text and an image vertically?

For most UI components, use Flexbox:

.container {
  display: flex;
  align-items: center;
}

Is vertical-align outdated?

No. It is still useful for inline and table-cell alignment. It is just not the right tool for every vertical-centering task.

Why does CSS use text metrics for inline alignment?

Because inline layout is designed around typography. Text, icons, and inline images are aligned according to line and font rules.

• CSS display property — vertical-align behaves differently depending on whether an element is inline, block, inline-block, or table-cell.
• CSS Flexbox — the most common modern solution for vertically centering items in a row.
• CSS Grid — useful when alignment is part of a larger two-dimensional layout.
• Inline formatting context — explains how text and inline elements share a line.
• Baseline alignment — essential for understanding why text and images line up the way they do.
• Line height — affects how inline content is spaced vertically.
• Replaced elements — images behave differently from plain text because they are replaced elements in CSS.