vertical-align

The vertical-align property aligns inline or inline-block elements vertically. It only works on inline/inline-block elements, not block elements. Common for images and text alignment.

Vertical Align Values

Value	Alignment	Use Case
baseline	Align to baseline	Default, text baseline
top	Top of line	Align to line top
middle	Middle of line	Center alignment
bottom	Bottom of line	Align to line bottom

CSS

/* Vertical alignment for inline/inline-block */
img {
  vertical-align: middle;
  /* Aligns image middle with text baseline */
}

.icon {
  display: inline-block;
  vertical-align: middle;
  /* Centers inline-block vertically */
}

/* Text baseline alignment */
sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

Practical Examples

CSS

/* Align image with text */
img {
  display: inline-block;
  vertical-align: middle;
}

/* Icon button alignment */
button {
  display: inline-block;
}

button svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* Center in fixed-height container */
.container {
  line-height: 40px;
  height: 40px;
}

.container img {
  vertical-align: middle;
}

Warning

vertical-align is confusing and limited. For centering, prefer flexbox or grid. vertical-align only works on inline/inline-block elements.

Note

vertical-align aligns inline/inline-block elements. Often confusing. Better to use flexbox or grid for centering.

Text overflow handling: [text-overflow, white-space, word-break](/css/text-overflow).