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.
- 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.
|baseline||This value is used to align the element’s baseline along with the parent element’s baseline. It is used as the default value.|
|length||The 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.|
|sub||If it has been subscripted, it aligns various elements.|
|super||If it has been subscripted, it aligns multiple elements.|
|top||The top value can be defined to align the element’s top using the tallest element over the line.|
|bottom||The bottom value is described to align the element’s bottom using the lowest element over the line.|
|text-top||The text-top value is used to align the element’s top with the use of a font of the parent element.|
|middle||In this, an element is positioned in between a parent element.|
|text-bottom||The text-bottom value is applied to align the element’s bottom with the use of a font of the parent element.|
|initial||This property can be set-up as a default value by using this value.|
|inherit||It can acquire the property from its parent element.|
Take a look on the following example of vertical align:
<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>