To specify the vertical alignment of an inline or a table-cell box, the CSS vertical-align property is used which is a self-explanatory CSS property. It does not affect the content (except table cells) of the element, but its alignment. In the case of the table cells, it does not affect the cell, but its contents.
CSS Vertical Align Values:
| Value | Uses |
| baseline | To align an element’s baseline with the baseline of the parent element. |
| length | To modify the length of the element by the specified length. |
| To modify the element in a percent of the “line-height” property. | |
| sub | To align the element as if it were subscript. |
| super | To align the element as if it was superscript. |
| top | To align the element’s top with the top of the tallest element on the line. |
| bottom | To align the element’s bottom with the lowest element on the line. |
| text-top | To align the element’s top with the top of the font of the parent element. |
| middle | To place an element in the middle of the parent element. |
| text-bottom | To align the element’s bottom with the bottom of the parent element’s font. |
| initial | To set this property to its default value. |
| inherit | To inherit this property from its parent element. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="img.jpg" height="150px" width="200px"> Image with a default alignment.</p>
<p><img src="img.jpg" class="top" height="150px" width="200px"> Image with a text-top alignment.</p>
<p><img src="img.jpg" class="bottom" height="150px" width="200px"> Image with a text-bottom alignment.</p>
</body>
</html>
Explanation:
In the above example, we are using the CSS Vertical Align property to specify an image with the default, text-top and text-bottom alignment.