CSS verticalalign Property (original) (raw)

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:

**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 `

CSS vertical-align Property 
<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>

vertical-align: baseline

A computer science portal 


<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 


<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 


<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 


<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 


<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 


<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 


<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 


<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 


<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 


<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 


<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

`

**Output:

**Supported Browsers

The browser supported by _vertical-align property are listed below: