How to use the "vertical-align" property in CSS

The vertical-align property in CSS allows the vertical alignment of the elements to be set. This property can only work on elements that are in-line or elements within a table cell.

Syntax

The syntax for this property is as follows:

Shown below is an illustration that exhibits the vertical-align property.

What values can be set?

A vertical-align method can take in different kinds of value-to-be-set to align the respective element in many ways. Let’s look at some of the possible values that can be given to it:

• baseline: This is the default value that sets the alignment of the element with the baselines of its parent.

• sub: This sets the alignment of the element in line with that of the subscript of the parent.

• super: This sets the alignment of the element in line with that of the superscript of the parent.

• %: The element can be aligned in line by a specific percentage amount; negative percentage will move the element lower.

• px: A number followed by px can also align the element by a specific number of pixels, this can also have a negative value.

• text-top or text-bottom: This aligns the element with either the top or the bottom of the text it is in-line with respectively.

• top or bottom: This aligns the element with the singular element on the line that is the tallest or at the most bottom respectively.

Implementing the property

Now that we know the various inputs that can be given to the vertical-align property, the code below shows how to use some of these.

In the snippet below, add your own class and test out the other values that can be given to the property: