CSS vertical-align Property
Example
Vertically align an image:
img {
vertical-align: text-top;
}
Property Definition and Usage
The vertical-align property sets the vertical alignment of an element.
This property defines the vertical alignment of the baseline of an inline element relative to the baseline of its containing line. It allows negative length values and percentage values, which cause the element to lower instead of rise. In table cells, this property sets the alignment of the cell content within the cell box.
| Default value: | baseline |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS1 |
| --- | --- |
| JavaScript syntax: | object.style.verticalAlign="bottom" |
| --- | --- |
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 |
Property Values
| Value | Description |
|---|---|
| baseline | Default. Element is placed on the baseline of the parent element. |
| sub | Vertically aligns the text as subscript. |
| super | Vertically aligns the text as superscript. |
| top | Aligns the top of the element with the top of the tallest element in the line. |
| text-top | Aligns the top of the element with the top of the parent element's font. |
| middle | Places the element in the middle of the parent element. |
| bottom | Aligns the bottom of the element and its descendants with the bottom of the entire line. |
| text-bottom | Aligns the bottom of the element with the bottom of the parent element's font. |
| length | Raises or lowers the element by the specified height. Can be negative. |
| % | Uses the percentage value of the "line-height" property to align the element. Allows negative values. |
| inherit | Specifies that the value of the vertical-align property should be inherited from the parent element. |
Related Articles
CSS Tutorial: CSS Text