Skip to content
Related Articles

Related Articles

CSS | vertical-align Property

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 04 Aug, 2022
Improve Article
Save Article

The vertical-align property in CSS is used to specify the vertical alignment of the table-box or inline element. 

Syntax:

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

Note: 

  • This property is mostly used to align images to it’s corresponding text.
  • This property can also be used to align the cells inside tables.
  • The vertical-align property cannot be used for the alignment of block level elements like p, ol, ul, h1, div etc.

Property Values:

  • baseline: It aligns the element baseline corresponding to the baseline of the parent. This might vary according to the browser. It is the default value.
  • sub: It aligns the element baseline corresponding to the subscript-baseline of its parent.
  • super: It aligns the element baseline corresponding to the superscript-baseline of its parent.
  • text-top: It aligns the element top corresponding to the top of the parent’s font.
  • text-bottom: Align the element’s bottom corresponding to the bottom of the parent’s font.
  • middle: Aligns the element’s middle corresponding to the middle of the parent.
  • top: Aligns the element’s top corresponding to the top of the tallest element on it’s line.
  • bottom: Aligns the element’s bottom corresponding to the top of the shortest element on it’s line.
  • length: Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
  • percentage: Aligns the element’s baseline corresponding to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property.
  • initial: Initializes the value to the default value.
  • inherit: Inherits the value from the parent element.

Example: This example explains all the values of vertical-align property. 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS vertical-align Property
    </title>
     
    <style>
        .img1 {
            vertical-align: baseline;
        }
        .img2 {
            vertical-align: sub;
        }
        .img3 {
            vertical-align: super;
        }
        .img4 {
            vertical-align: text-top;
        }
        .img5 {
            vertical-align: text-bottom;
        }
        .img6 {
            vertical-align: middle;
        }
        .img7 {
            vertical-align: top;
        }
        .img8 {
            vertical-align: bottom;
        }
        .img9 {
            vertical-align: 25px;
        }
        img.img10 {
            vertical-align: 100%;
        }
        .img11 {
            vertical-align: baseline;
        }
        .img12 {
            vertical-align: inherit;
        }
    </style>
</head>
 
<body>
    <h2>vertical-align: baseline</h2>
    <p>
        <img class = "img1" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: sub</h2>
    <p>
        <img class = "img2" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: super</h2>
    <p>
        <img class = "img3" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: text-top</h2>
    <p>
        <img class = "img4" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: text-bottom</h2>
    <p>
        <img class = "img5" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: middle</h2>
    <p>
        <img class = "img6" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: top</h2>
    <p>
        <img class = "img7" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: bottom</h2>
    <p>
        <img class = "img8" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: length</h2>
    <p>
        <img class = "img9" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: percentage</h2>
    <p>
        <img class = "img10" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: initial</h2>
    <p>
        <img class = "img11" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
     
     
    <h2>vertical-align: inherit</h2>
    <p>
        <img class = "img12" src =
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p>
    </body>
</html>                   

Output:

  

Supported Browsers: The browser supported by vertical-align property are listed below:

  • Chrome 1.0
  • Edge 12.0
  • Firefox 1.0
  • Internet Explorer 4
  • Safari 1.0
  • Opera 4.0

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!