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:

<html>
 <head>
 <style>
 img.img1{
 vertical-align: baseline;
 }


 img.img2{
 vertical-align: super;
 }

 img.img3{
 vertical-align: top;
 }

 img.img4{
 vertical-align: middle;
 } 

 img.img5{
 vertical-align: -50%;
 }
 </style>
 </head>
 <body>
 <img class = "img1" width = 20px height = 20px src= https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png> Baseline
 <img class = "img2" width = 20px height = 20px src= https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png> Super
 <img class = "img3" width = 20px height = 20px src= https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png> Top
 <img class = "img4" width = 20px height = 20px src= https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png> Middle
 <img class = "img5" width = 20px height = 20px src= https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png> -50%
 </body>
</html>

codemirror

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

Align in-line or table elements vertically in CSS using vertical-align with values like baseline, sub, super, %, px, text-top, text-bottom, top, or bottom.