Report this

What is the reason for this report?

CSS vertical-align Property

Published on September 3, 2020
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.

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

Learn more about our products

About the author

Alligator
Alligator
Author
See author profile

Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.

Category:
Tags:
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.

Still looking for an answer?

Was this helpful?


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!

Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.