Tutorial

CSS vertical-align Property

CSS

By Alligator.io
PostedSeptember 3, 2020

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Introduction

vertical-align defines the vertical alignment for the content of a table cell or for an inline element against the rest of the inline flow.

vertical-align can take a % or length value, or it can take one of the following 8 keywords:

baseline: The default. Baseline of the element aligned to the baseline of the parent.
bottom: Bottom of the element aligned to the complete bottom of the line.
middle: Middle of the element aligned to half the x-height of the parent. The x-height is the height of the text without the character ascenders or descenders.
sub: Baseline of the element aligned to the subscript baseline of the parent.
super: Baseline of the element aligned to the superscript baseline of the parent.
text-bottom: Bottom of the element aligned to the bottom of the text.
text-top: Top of the element aligned to the top of the text.
top: Top of the element aligned to the top of the line.

If a length value is provided, the element is aligned at the specified length above the baseline of the parent.

If a % value is provided, the element is aligned at the specified % above the baseline of the parent, with the % being a reference to the line-height.

Here’s an example using vertical-align:

.avatar {
  vertical-align: middle;
}

Examples

It can be hard to visualize the effects of the different keyword values for vertical-align, so here are examples with an inline seashell emoji (🐚) placed with different values: