// Tutorial //

CSS vertical-align Property

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

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking 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:

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Β 
Leave a comment
Leave a comment...ο»Ώ

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click here to Sign up and get $200 of credit to try our products over 60 days!