Last updated on

The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

img {
  vertical-align: middle;
}

In order for this to work, the elements need to be set alone a baseline. As in, inline (e.g.<span>, <img>) or inline-block (e.g. as set by the display property) elements.

The valid values are:

  • baseline – This is the default value.
  • top – Align the top of the element and its descendants with the top of the entire line.
  • bottom – Align the bottom of the element and its descendants with the bottom of the entire line.
  • middle – Aligns the middle of the element with the middle of lowercase letters in the parent.
  • 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.
  • sub – Aligns the baseline of the element with the subscript-baseline of its parent. Like where a <sub> would sit.
  • super – Aligns the baseline of the element with the superscript-baseline of its parent. Like where a <sup> would sit.
  • length – Aligns the baseline of the element at the given length above the baseline of its parent. (e.g. px, %, em, rem, etc.)

You can see examples of each here:

<div class="middle">
  <h2>Middle</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="top">
  <h2>Top</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="bottom">
  <h2>Bottom</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="sub">
  <h2>Sub</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="super">
  <h2>Super</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="text-top">
  <h2>Text Top</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="text-bottom">
  <h2>Text Bottom</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="baseline">
  <h2>Baseline</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="pixel">
  <h2>30px</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="percentage">
  <h2>-500%</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>
.middle > * {
  vertical-align: middle;
}

.top > * {
  vertical-align: top;
}

.bottom > * {
  vertical-align: bottom;
}

.sub > * {
  vertical-align: sub;
}

.super > * {
  vertical-align: super;
}

.text-top > * {
  vertical-align: text-top;
}

.text-bottom > * {
  vertical-align: text-bottom;
}

.baseline > * {
  vertical-align: baseline;
}

.pixel > * {
  vertical-align: 30px;
}

.percentage > * {
  vertical-align: -500%;
}


body {
  padding: 20px;
  background: #eee;
}

h2 {
  display: inline-block;
  margin: 0;
  width: 150px;
  text-align: right;
  font: bold 20px Sans-Serif;
}

div {
  margin: 0 0 30px 0;
  padding: 10px;
  background: white;
  white-space: nowrap;
}

A common use case is lining up an avatar with a username. To get them centered along a line, you’d use vertical-align: middle;. Although note that it centers the text according to its tallest accender and deepest decender.

vert-align

Each element lines up according to the line you’ve set, which doesn’t change from element to element. So, you can mix-and-match which elements have which value – the elements don’t effect each other.

Note that vertical-align is useful on table-cell elements as well, aligning the content within them. Sticking to top, middle, and bottom is the best bet though, as the other values have inconsistant cross-browser results.

topandbottom

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 4+ 4+ Any Any
Fairly consistent across browsers old and new, assuming the font is the same.

Note that some replace elements (e.g. <textarea>) are inline, but their baseline isn’t specified, so behavior may vary from browser to browser.