Everything You Should Know About vertical-align

Introduction

The vertical-align CSS property aligns inline or table‑cell elements vertically, similar to how text-align:center controls horizontal alignment. It is often misunderstood because it only works on specific element types and can be overridden by other layout properties.

Why Use vertical-align?

float

: aligns only to the top and may cause layout collapse. position:absolute: removes the element from the document flow.

Manual margin/padding: requires a fixed parent height. transform:translateY: CSS3 feature with limited IE8/9 support.

Using vertical-align offers fine‑grained control with broad browser compatibility.

Prerequisites

Before using vertical-align, understand these concepts:

Baseline – the bottom of the letter "x" in a font.

Line‑height – the distance between baselines of consecutive lines.

Inline boxes – elements such as span, a, em that flow inline.

Line boxes – a collection of inline boxes forming a line.

Content area – the invisible box around text whose size depends on font-size.

Containing box – the outer box that contains other boxes.

Applicable elements: span, img, input, button, td, or any element whose display is changed to inline or table-cell. Block elements like div and p ignore vertical-align.

vertical-align Values

Except for inherit , vertical-align values fall into four categories.

Line‑related values : baseline, top, middle, bottom. The default baseline aligns the element’s baseline with the parent line box’s baseline.

Text‑related values : text-top aligns the element’s top with the top of the parent’s content area; text-bottom aligns the bottom similarly.

Super/Subscript values : super and sub behave like the HTML <sup> and <sub> tags.

Numeric/percentage values : e.g., 10px, 1em, 5%. Positive numbers move the element up from the baseline, negatives move it down; percentages are calculated from line-height.

Interaction with line-height

For inline elements, vertical-align works together with line-height. A common cause of vertical-align not taking effect is an unexpected line-height value.

Demo 1 – Image inside a block element

<div class="box">
  <img src="./panda.jpg" />
</div>
<style>
  .box { width:300px; border:1px solid #ddd; }
  img { width:100px; height:100px; }
</style>

Because the image is an inline element, its baseline aligns with the bottom of the line box, causing extra space. Solutions include setting display:block on the image, applying vertical-align:top / bottom / middle, or reducing line-height or font-size to zero.

Demo 2 – Approximate vertical centering

<div class="box">
  <span class="son"></span> x
</div>
<style>
  .box { width:300px; height:150px; line-height:150px; font-size:20px; border:1px solid #ddd; position:relative; }
  .son { display:inline-block; width:100px; height:100px; vertical-align:middle; background-color:purple; }
</style>

The vertical-align:middle aligns the element’s vertical center with the parent line box’s midpoint, which approximates true centering but may appear slightly offset due to the text’s descent.

Extended Cases

Case 1 – Vertically centering content of unknown height

When the parent’s height varies with content, using line-height equal to height is not feasible. Instead, create an inline‑block element and a zero‑width, 100%‑height pseudo‑element to act as a helper, then apply vertical-align:middle.

<ul>
  <li class="text-container"><span>Single line text</span></li>
  <li class="text-container"><span>Multiple lines of text …</span></li>
</ul>
<style>
  .text-container { height:150px; text-align:center; vertical-align:middle; }
  .text-container:after { content:""; display:inline-block; width:0; height:100%; vertical-align:middle; }
  span { vertical-align:middle; display:inline-block; max-width:90%; max-height:100px; overflow:hidden; }
</style>

Case 2 – Two‑end alignment of a multi‑image list

Using display:inline-block together with a dummy element ( .justify-fix) and setting text-align:justify on the container, we can force the last item to align with the right edge.

<dl class="container">
  <dt><img src="./7.jpg"/></dt>
  ...
  <dt><i class="justify-fix"></i></dt>
</dl>
<style>
  .container { text-align:justify; width:400px; margin:50px auto; border:1px solid #ddd; line-height:0; }
  dt { list-style:none; display:inline-block; width:100px; }
  .container img { width:100px; height:100px; }
  .justify-fix { display:inline-block; width:100px; outline:1px dashed #317ffd; vertical-align:middle; }
</style>

Summary

The article explains the fundamentals of the vertical-align property, its value categories, interaction with line-height, common reasons for failure, and provides practical solutions and code snippets for precise vertical alignment in various layout scenarios.