CSS vertical-align Property
The CSS's vertical-align property governs how elements set next to each other on a line are aligned. To make this work, the elements must be aligned along a baseline. In other words, inline (e.g., <span>, <img>) or inline-block (as defined by the display property) elements.
Syntax
Property Values
| Value | Description |
|---|---|
| baseline | The element is in line with the parent's baseline. This is the default setting. |
| length | Increases or decreases an element by the specified length. Negative values are permitted. Learn more about length units. |
| % | Increases or decreases an element by a percentage of its "line-height" property. Negative values are permitted. |
| sub | The element is aligned with the parent's subscript baseline. |
| super | The element is aligned with the parent's superscript baseline. |
| top | The element is aligned with the top of the line's tallest element. |
| text-top | The element is aligned with the top of the font of the parent element. |
| middle | The element is positioned in the center of the parent element. |
| bottom | The element is aligned with the line's lowest element. |
| text-bottom | The element is aligned with the bottom of the font of the parent element. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| vertical-align | 1.0 | 1.0 | 1.0 | 4.0 | 4.0 |