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;
}
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:
Sammy sells seashells 🐚 by the seashore.
Sammy sells seashells 🐚 by the seashore.
Sammy sells seashells 🐚 by the seashore.
Sammy sells seashells 🐚 by the seashore.
Sammy sells seashells 🐚 by the seashore.
Sammy sells seashells 🐚 by the seashore.
Sammy sells seashells 🐚 by the seashore.
Sammy sells seashells 🐚 by the seashore.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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.
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!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.