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
Value | Description |
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. |
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: