Categories

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.

If you would like to write guest posts for Blog Identity, you can contact us onĀ info@blogidentity.com and check our submission guidelines.

Leave a Reply

Your email address will not be published. Required fields are marked *