CSS vertical-align Property

Learn about the CSS vertical-align Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on April 04, 2022

The proper alignment of items in a webpage is one of the most important aspects of web design. Various CSS properties are available for specifying the proper positioning of HTML elements. In this article, we'll talk about the vertical-align property, which is one of the most important properties to set the alignment of an element.

What is CSS vertical-align Property?

The vertical-align property specifies that an element is vertically aligned inside a container. The default value is baseline.

Note: This property can't be used to vertically align block-level elements like, <p>, <div>, <h1>, etc.

Syntax:

vertical-align: baseline| bottom| initial| inherit| length| middle| sub |super| text-bottom| text-top

Quick overview of the syntax used,

Value	Explanation
baseline	Default value. Vertical alignment of elements at the baseline of container.
bottom	Vertical alignment of the element at the bottom of the container.
length	Vertical alignment of the element by the specified length.
middle	Vertical alignment of the element at the center of the container.
sub	Vertical alignment of the element at the subscript baseline of the container.
super	Vertical alignment of the element at the superscript baseline of the container.
text-bottom	The element is aligned with the lowest element on the line.

The example given below illustrates CSS vertical-align Property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vertical-align</title>
   </head>
   
   <style>
      #container{
      border: 4px solid red;
      font-size: x-large;
      }
      span{
      background-color: aqua;
      vertical-align: sub;
      }
   </style>
   
   <body>
      <div id="container">
         <p>This element is not vertically aligned</p>
         <span>This element is vertically aligned</span>
      </div>
   </body>
</html>

Output:

Since the property value is set to sub, the baseline of an element is vertically aligned with the subscript-baseline of the container.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vertical-align</title>
   </head>
   
   <style>
      #container{
      font-size: x-large;
      background-color: blueviolet;   
      }
      span{
      vertical-align: 30px;
      }
   </style>
   
   <body>
      <div id="container">
         This image is vertically aligned<span><img src="https://media.istockphoto.com/photos/mountain-landscape-
            picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" width="200px"></span>
      </div>
   </body>
</html>

Output:

As you can see, the vertical-align property raises an element (image) by 30px.

CSS Tutorial & Examples »

The border-bottom-color in CSS

The outline Property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples