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
||It aligns the baseline of element with the baseline of parent element. This is a default value.
||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.
||It aligns the element as if it was subscript.
||It aligns the element as if it was superscript.
||It aligns the top of the element with the top of the tallest element on the line.
||It aligns the bottom of the element with the lowest element on the line.
||the top of the element is aligned with the top of the parent element's font.
||the element is placed in the middle of the parent element.
||the bottom of the element is aligned with the bottom of the parent element's font.
||It sets this property to Its default value.
||inherits this property from Its parent element.
CSS Vertical Align Example
Test it Now
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.