CSS vertical-align Property
Topic: CSS3 Properties ReferencePrev|Next
Description
This vertical-align CSS property controls the vertical alignment of boxes generated by an inline-level element (usually text and images) with respect to the text baseline within a block-level box, or of table cells within a row.
The following table summarizes the usages context and the version history of this property.
| Default value: | baseline |
|---|---|
| Applies to: | Inline-level and table-cell elements |
| Inherited: | No |
| Animatable: | Yes. See animatable properties. |
| Version: | CSS 1, 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the vertical-align property in action.
Example
Try this code »img {
vertical-align: middle;
}
span {
vertical-align: super;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
baseline |
Align the baseline of the element's box with the baseline of the parent box. |
sub |
Lower the baseline of the box to the position suitable for subscripts of the parent's box. |
super |
Raises the baseline of the box to the position suitable for superscripts of the parent's box. |
top |
Align the top of the element and its descendants with the top of the line box. |
text-top |
Align the top of the element with the top of the parent element's font. |
middle |
Align the middle of the element with the point that's half the parent's x-height above the baseline of the parent box. |
bottom |
Align the bottom of the element and its descendants with the bottom of the line box. |
text-bottom |
Align the bottom of the element with the bottom of the parent element's font. |
| length | A length value in px, pt, cm, em, etc. Length values raise (positive value) or lower (negative value) the box by this distance from the baseline of its parent. The value 0px is same as baseline. |
| percentage | Raise (positive value) or lower (negative value) the box by this distance (a percentage of the line-height value). The value 0% is same as baseline. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element vertical-align property. |
Browser Compatibility
The vertical-align property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Alignment.
Related properties: line-height.
