CSS Vertical Align

Vertical Align

The vertical align CSS property describes the cell box of the table and an inline alignment vertically. This property is a self-explanatory and an essential property in CSS. But, it is not easy to implement for many beginners.

Working

• The vertical align property can be used for inline-block or inline elements.
• These properties do not affect the content of the element, but its alignment (excluding table-cells).
• It also does not affect the table cell itself, but the content of the cell when we use this property on any table cell.

Property Values

ValueDescriptionbaselineThis value is used to align the element’s baseline along with the parent element’s baseline. It is used as the default value.lengthThe length value increases and decreases the element’s length using a specified length value. Negative values can also be used in this property.%The percent value increases and decreases so many elements using a percent value. Negative values can also be used in this property.subIf it has been subscripted, it aligns various elements.superIf it has been subscripted, it aligns multiple elements.topThe top value can be defined to align the element’s top using the tallest element over the line.bottomThe bottom value is described to align the element’s bottom using the lowest element over the line.text-topThe text-top value is used to align the element’s top with the use of a font of the parent element.middleIn this, an element is positioned in between a parent element.text-bottomThe text-bottom value is applied to align the element’s bottom with the use of a font of the parent element.initialThis property can be set-up as a default value by using this value.inheritIt can acquire the property from its parent element.

Example:

Take a look on the following example of vertical align:

<!DOCTYPE html>
<html>
<head>
<style>
img.top
{
vertical-align: text-top;
}
img.bottom
{
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src= "Flower1.jpg" alt= "Beautiful Flower"/> This is a picture with the default alignment. </p>
<p><img src= "Flower1.jpg" class= "top" alt= "Beautiful Flower"/> This is a picture with the text-top alignment. </p>
<p><img src= "Flower1.jpg" class= "bottom" alt= "Beautiful Flower"/> This is a picture with the text-bottom alignment. </p>
</body>
</html>

Output:     

← Prev Next →