CSS Vertical Align

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 was 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>

Output:

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.

Please Share