// Tutorial //

CSS vertical-align Property

Published on September 3, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
CSS vertical-align Property

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:

vertical-align: baseline

Sammy sells seashells 🐚 by the seashore.

vertical-align: bottom

Sammy sells seashells 🐚 by the seashore.

vertical-align: middle

Sammy sells seashells 🐚 by the seashore.

vertical-align: sub

Sammy sells seashells 🐚 by the seashore.

vertical-align: super

Sammy sells seashells 🐚 by the seashore.

vertical-align: text-bottom

Sammy sells seashells 🐚 by the seashore.

vertical-align: text-top

Sammy sells seashells 🐚 by the seashore.

vertical-align: top

Sammy sells seashells 🐚 by the seashore.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment