🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

CSS Vertical Align

Reading time 2 min
Published Sep 8, 2017
Updated Jan 21, 2020

How to use CSS vertical alignment

Using the vertical-align property allows you to set CSS vertical alignment for items inside the element:

Example
img.first {
    vertical-align: baseline;
}

img.second {
    vertical-align: text-top;
}

img.third {
    vertical-align: text-bottom;
}

img.fourth {
    vertical-align: sub;
}

img.fifth {
    vertical-align: super;
}

This property works with inline elements and table cells.

Note: as vertical-align doesn't affect block elements, you cannot use it to vertically align text in div elements. To do that, use Flexbox.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Syntax for vertical-align

To apply CSS vertical alignment, follow the syntax example below:

vertical-align: value;

All the available CSS vertical-align property values will be explained in the table below.

Value Description
baseline The default value. Aligns the baseline of the element with the baseline of the parent
sub Aligns the element like subscript
super Aligns the element like superscript
top Aligns the top of the element with the top of the line
bottom Aligns the bottom of the element with the bottom of the line
text-top Aligns the top of the element with the top of the parent's text
middle Aligns the middle of the element with the middle of the parent's lowercase text
text-bottom Aligns the bottom of the element with the bottom of the parent's text
Length units Raises or lowers the element by the value specified (can be positive or negative)
Percentages Raises or lowers the element in relation to the value of line-height (can be positive or negative)

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
4+
Browser image
Opera
4+
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
1+