CSS vertical-align Property

❮ Previous Complete CSS Reference Next ❯

Example

Vertical align an image:

img.a {
  vertical-align: baseline;
}

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

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

img.d {
vertical-align: sub;
}

img.e {
  vertical-align: super;
}

Try it Yourself »

Definition and Usage

The vertical-align property sets the vertical alignment of an element.

Show demo ❯

Default value:	baseline
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.verticalAlign="top" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
vertical-align	1.0	4.0	1.0	1.0	4.0

CSS Syntax

Property Values

Value	Description	Demo
baseline	The element is aligned with the baseline of the parent. This is default	Demo ❯
length	Raises or lower an element by the specified length. Negative values are allowed. Read about length units	Demo ❯
%	Raises or lower an element by a percent of the "line-height" property. Negative values are allowed	Demo ❯
sub	The element is aligned with the subscript baseline of the parent	Demo ❯
super	The element is aligned with the superscript baseline of the parent	Demo ❯
top	The element is aligned with the top of the tallest element on the line	Demo ❯
text-top	The element is aligned with the top of the parent element's font	Demo ❯
middle	The element is placed in the middle of the parent element	Demo ❯
bottom	The element is aligned with the lowest element on the line	Demo ❯
text-bottom	The element is aligned with the bottom of the parent element's font	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS Text Alignment

HTML DOM reference: verticalAlign property