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.

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

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

Mobile browser support

Chrome
18+
Firefox
4+
Opera
All
Safari
1+