vertical-align

The vertical-align property specifies vertical positioning inside a line box of the boxes generated by an inline-level element.

Syntax

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies To: inline-level and table-cell elements
Inherited: no
Percentages: refer to the line-height of the element
Media: visual

Values

vertical-align: value
Value Description
baseline Aligns the baseline of the box with the baseline of the parent box
bottom Aligns the bottom of the aligned subtree with the bottom of the line box
length Raises or lowers the box by a fixed measurement from the baseline
middle Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent
percentage Raises or lowers the box by a percentage of the line-height from the baseline
sub Lowers the baseline of the box to the position for subscripts of the parent's box
super Raises the baseline of the box to the position for superscripts of the parent's box
text-bottom Aligns the bottom of the box with the bottom of the parent's content area
text-top Aligns the top of the box with the top of the parent's content area
top Aligns the top of the aligned subtree with the top of the line box

DOM

[window.]document.getElementById("element-id").style.verticalAlign = "vertical-align";

Example | baseline

Example | bottom

Example | length

Example | middle

Example | percentage

Example | sub

Example | super

Example | text-bottom

Example | text-top

Example | top

Example | DOM | 1

Example | DOM | 2

External

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification