Understand the basic of CSS Vertical Alignment
The CSS inline elements property is used to set the element next to each other into the current line, there is also 2 other line above and under this line. These lines are called a line box. Different sized elements are set into the different line box height.
With the help vertical-align property we can easily vertical align the element to the next element, which is pretty difficult in CSS or you may write lots of CSS for this, vertical-align property support all browsers.
The CSS vertical-align property will work in two type of contents
1. Vertically align an inline element inside its line box.
2. Vertically align the element inside a table.
In the following CSS values vertically align the element to its parent element:
Top Element is aligned to the top of the tallest element of the entire line.
Bottom Element is aligned with the lowest element of the entire line.
Middle Element is aligned in the middle of the parent element
Baseline – Element is aligned with the baseline of the parent. This is default values
Text-top Element is aligned with the top of the parent element’s font
Text-bottom Element is aligned with the bottom of the parent element’s font
Super Element is aligned with the superscript baseline of the parent
Sub Element is aligned with the subscript baseline of the parent
Length Element is aligned with the baseline of the element at the given length above the baseline of its parent(e.g. 10px, 10%, cm).
Now you can use vertical-align property in your next project, We have used example code only for demonstration. Hope you have enjoyed this article.
Don’t forget to share this article with your friends.