CSS vertical-align

View Output

The CSS vertical-align property is used for aligning inline-level and 'table-cell' elements vertically.

Syntax

Where

And

These values are explained below.

Possible Values

'baseline-shift'

This property specifies by how much the box is shifted up from its alignment point. It does not apply when alignment-baseline is top or bottom.

Can be one of the following values:

length
Raise (using a positive value) or lower (using a negative value) by the specified length.
percentage
Raise (using a positive value) or lower (using a negative value) by the specified percentage of the line-height.
sub
Lower by the offset appropriate for subscripts of the parent's box.
super
Raise by the offset appropriate for superscripts of the parent's box.

'alignment-baseline'

Specifies what point of an inline-level box is aligned to what point in the parent.

Can be one of the following values:

baseline
Uses the dominant baseline choice of the parent. Matches the box's corresponding baseline to that of its parent.
text-bottom
Aligns the bottom of the box with the bottom of the parent's content area.
alphabetic
Matches the box's alphabetic baseline to that of its parent.
ideographic
Matches the box's ideographic character face under-side baseline to that of its parent.
middle
Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
central
Matches the box's central baseline to the central baseline of its parent.
mathematical
Matches the box's mathematical baseline to that of its parent.
text-top
Matches the top of the box to the top of the parent's content area.
bottom
Aligns the bottom of the aligned subtree with the bottom of the line box.
center
Aligns the center of the aligned subtree with the center of the line box.
top
Aligns the top of the aligned subtree with the top of the line box.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
baseline
Applies To
Inline-level boxes
Inherited?
No
Media
Visual
Animatable
Yes (see example)

Example Code

Official Specifications