CSS vertical-align Property

The vertical-align property sets the element's vertical alignment.

Vertical alignment only affects inline, inline-block, and table-cell boxes.

Elements can be aligned at the top, bottom, and some values in between.

Example

#

An inline image with a vertical-align value of top.

This image is aligned to the top

<p>
  This <img style="vertical-align: top" 
            src="/img/css/star.png" />
  image is aligned to the top
</p> 

Syntax

vertical-align: baseline | length | sub | super |
                top | text-top | middle | bottom | 
                text-bottom | initial | inherit;

Values

#

Value Description
baseline Default. Aligned with the parent's baseline
length Raises or lowers the element using a specified length
% Raises or lowers the element using a specified percentage
sub Align with the parent's subscript baseline
super Align with the parent's superscript baseline
top Align with the top of the entire line. The highest point.
text-top Align with the top of the parent element's font.
middle Align with the middle of the parent
bottom Align with the bottom of the entire line. The lowest point.
text-bottom Align with the bottom of the parent element's font.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Note: For table-cell boxes only top, middle, and bottom are valid values.


More Examples

Click the buttons to see the different vertical-align values.

This image is displayed with a vertical alignment

<style>
  .vertical {
    vertical-align: baseline;
  }
</style>

<p>
  This <img class="vertical" src="/img/css/star.png">
  image is displayed with a vertical alignment
</p> 

Browser support

This table shows when vertical-align support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
4.0 Jun 2000
Safari
1.0 Jun 2003

You may also like

Guides