CSS vertical-align Property

Last Updated : 24 Sep, 2024

The CSS vertical-align property is used to control the vertical positioning of inline elements or table cells. It helps in aligning images or text within the same line and is commonly used to adjust content in table cells.

This property is perfect for aligning elements relative to each other without affecting the entire layout.

Syntax

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

Note:
The vertical-align property is primarily used to align inline elements (like images) with text.
It can also be used for aligning content within table cells.
Block-level elements (e.g., div, p, h1, ul, ol) cannot be aligned using vertical-align.

Property Values

Value	Description
baseline	Aligns the element’s baseline with the baseline of its parent. This is the default value and may vary by browser.
sub	Positions the element’s baseline as a subscript relative to its parent’s baseline.
super	Positions the element’s baseline as a superscript relative to its parent’s baseline.
text-top	Aligns the top of the element with the top of the parent's font.
text-bottom	Aligns the bottom of the element with the bottom of the parent's font.
middle	Centers the element's vertical midpoint with the parent's vertical midpoint.
top	Aligns the element’s top with the top of the tallest element in the same line.
bottom	Aligns the element’s bottom with the bottom of the shortest element in the same line.
length	Moves the element’s baseline by a specified length above (or below for negative values) the parent’s baseline.
percentage	Shifts the element’s baseline by a percentage relative to the parent’s baseline, based on the line-height property.
initial	Resets the alignment to the default value (`baseline`).
inherit	Adopts the vertical alignment value from the parent element.

Let's understand this property through this example

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 =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: sub</h2> 
    <p>
        <img class = "img2" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: super</h2>
    <p>
        <img class = "img3" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        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 =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        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 =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: middle</h2>
    <p>
        <img class = "img6" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: top</h2>
    <p>
        <img class = "img7" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: bottom</h2>
    <p>
        <img class = "img8" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: length</h2>
    <p>
        <img class = "img9" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: percentage</h2>
    <p>
        <img class = "img10" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: initial</h2>
    <p>
        <img class = "img11" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p><br>
    
    
    <h2>vertical-align: inherit</h2>
    <p>
        <img class = "img12" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png" 
        alt = "" class="alignnone size-medium wp-image-862984" />
        A computer science portal
    </p>
    </body>
</html>