CSS vertical-align attribute

Definition and Usage

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

Description

This attribute defines the vertical alignment of the baseline of the inline element relative to the baseline of the line it is in. Negative length values and percentage values can be specified. This will make the element lower rather than raise. In table cells, this property sets the alignment of the cell content within the cell box.

See also:

CSS Tutorial:CSS Text

HTML DOM Reference Manual:verticalAlign Property

Example

Vertical alignment of an image:

img
  {
  vertical-align:text-top;
  }

Try it yourself

CSS Syntax

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

Attribute Value

Value Description
baseline Default. The element is placed on the baseline of the parent element.
sub Vertical alignment of the subscript text.
super Vertical alignment of the superscript text
top Aligns the top of the element with the top of the highest element in the line.
text-top Aligns the top of the element with the top of the parent element's font.
middle Places this element in the middle of the parent element.
bottom Aligns the top of the element with the top of the lowest element in the line.
text-bottom Aligns the bottom of the element with the bottom of the parent element's font.
length 　
% Aligns this element using the percentage value of the "line-height" property. Negative values are allowed.
inherit Specifies that the value of the vertical-align property should be inherited from the parent element.

Technical Details

Default Value: baseline
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.verticalAlign="bottom"

More examples

Vertical alignment of images
This example demonstrates how to vertically align images in text.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0