It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

CSS Vertical Align

Reading time 2 min
Published Sep 8, 2017
Updated Oct 10, 2019

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.

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+