CSS Vertical Align
The CSS vertical align property is used to define the vertical alignment of an inline or table-cell box. It is the one of the self-explanatory property of CSS. It is not very easy property for beginners.
What it does
- It is applied to inline or inline-block elements.
- It affects the alignment of the element, not its content. (except table cells)
- When it applied to the table cells, it affect the cell contents, not the cell itself.
CSS Vertical Align Values
| value |
description |
| baseline |
It aligns the baseline of element with the baseline of parent element. This is a default value. |
| length |
It is used to increase or decrease length of the element by the specified length. negative values are also allowed. |
| % |
It is used to increase or decrease the element in a percent of the "line-height" property. negative values are allowed. |
| sub |
It aligns the element as if it was subscript. |
| super |
It aligns the element as if it was superscript. |
| top |
It aligns the top of the element with the top of the tallest element on the line. |
| bottom |
It aligns the bottom of the element with the lowest element on the line. |
| text-top |
the top of the element is aligned with the top of the parent element's font. |
| middle |
the element is placed in the middle of the parent element. |
| text-bottom |
the bottom of the element is aligned with the bottom of the parent element's font. |
| initial |
It sets this property to Its default value. |
| inherit |
inherits this property from Its parent element. |
CSS Vertical Align Example
Test it Now
Output:
 This is an image with a default alignment.
This is an image with a text-top alignment.
This is an image with a text-bottom alignment.
| 
