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
• the result may be subtle
• it may not look like perfect visual centering

So middle is working according to CSS rules, but not according to the common expectation of “put the text exactly halfway up the image.”

Important detail in your code

You applied vertical-align: middle only to the span. The img remains aligned using its default inline behavior. Since inline alignment depends on how inline-level boxes relate to each other on the same line, changing one item may not always create the visual result you expect.

A more predictable version is:

img,
span {
  vertical-align: middle;
}

This makes both inline elements align to the same middle reference.

Why this matters in real programming

Understanding vertical-align helps you avoid layout bugs when working with:

• icons next to text
• badges and labels
• inline images in content
• form controls aligned with labels
• table-cell alignment

It also helps you know when to stop using vertical-align and switch to a modern layout system like Flexbox.

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

<div class="media">
  <img src="https://via.placeholder.com/30" alt="icon">
  <span>Centered text</span>
</div>

.media {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

This is often the best modern solution when you want the image and text centered relative to each other.

Example 4: Table-cell vertical centering

<div class="cell">Text</div>

.cell {
  display: table-cell;
  height: 80px;
  vertical-align: middle;
}

Here, vertical-align: middle behaves more like many beginners expect, because table-cell alignment is a different layout mode.

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 div

It is based on inline formatting rules.

Compare with Flexbox

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

With Flexbox:

1. The container becomes a flex container.
2. The image and span become flex items.
3. align-items: center centers them along the cross axis.
4. The result is box-based and visually predictable.

This is why Flexbox is usually preferred for UI layout.

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.

Example: modern component layout

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

This is more robust in real interfaces.

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
• fragile alignment that breaks when font size changes

Avoiding hacks

Instead of doing this:

span {
  position: relative;
  top: -3px;
}

developers prefer predictable layout rules such as:

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

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

vertical-align does not affect normal block layout the way many expect.

Broken example:

div {
  vertical-align: middle;
}

This usually has no useful effect on a standard block element.

3. Aligning only one inline element

span {
  vertical-align: middle;
}

This may produce little or no obvious visual change. Try aligning both related inline elements:

img,
span {
  vertical-align: middle;
}

4. Confusing visual centering with typographic centering

middle in inline layout is based on font metrics, so it may still look slightly off.

If you want strict visual centering, use Flexbox.

5. Using manual nudges instead of layout tools

Broken habit:

span {
  position: relative;
  top: -4px;
}

Why to avoid it:

• fragile across fonts
• breaks when font size changes
• hard to maintain

Prefer layout-based solutions.

vertical-align vs Flexbox

• Use vertical-align when dealing with inline-level alignment.
• Use Flexbox when dealing with layout and component alignment.

middle vs top

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:

• Is the element inline or inline-block?
• Is it being aligned against another inline element?
• Are you expecting box centering instead of typographic alignment?
• Would Flexbox be a better fit?

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.