CSS vertical-align Property
Example
.example1 {
vertical-align: baseline;
}
.example2 {
vertical-align: text-top;
}
.example3 {
vertical-align: text-bottom;
}
.example4 {
vertical-align: sub;
}
.example5 {
vertical-align: super;
}Hello World!
Meaning
The vertical-align property sets the vertical positioning of text and images with respect to the baseline setting.
Note: That vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
| Default value: | baseline |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS1 |
| JavaScript syntax: | |
Standard Syntax
vertical-align: baseline|length|%|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| baseline | The default value is baseline, which is also equivalent to 0 or 0%. |
| 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) | Positive and negative percentages values can be used, with positive values raising the text and negative values lowering the text relative to the baseline. |
| sub | The element is aligned with the subscript baseline of the parentA value of middle aligns the middle of text or images to the middle of the x-height of the containing element. |
| super | The element is aligned with the superscript baseline of the parent. |
| top | It aligns the top of text or images with the top of the tallest element, relative to the baseline. |
| text-top | It aligns the top of text or images with the top of the font in the containing element. |
| middle | It aligns the middle of text or images to the middle of the x-height of the containing element. |
| bottom | It aligns the bottom of text or images with the bottom of the lowest element, relative to the baseline. |
| text-bottom | It aligns things with the bottom of the font. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
vertical-align: baseline;
}