Related Articles

Related Articles

CSS | vertical-align Property
  • Last Updated : 09 Aug, 2019

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

  • Chrome 1.0
  • Edge 4.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 4.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :