CSS Vertical Align

CSS vertical-align property vertically aligns the text of the inline elements. For example,

span {
    vertical-align: super;
}

Browser Output

CSS Vertical Align Example Description

Here, vertical-align is used to align the span element's content with its parent's superscript baseline.


CSS Vertical-Align Syntax

The syntax of the vertical-align property is,

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

Here,

  • baseline: aligns the element with the baseline of the parent element (default value)
  • length: aligns the element relative to the baseline of the parent using a length value such as px, pt, etc, negative values are allowed
  • top: aligns the top of the element with the top of the parent element
  • middle: aligns the middle of the element with the middle of the parent element
  • bottom: aligns the bottom of the element with the bottom of the parent element
  • text-top: aligns the top of the element with the top of the parent element's font
  • text-bottom: aligns the bottom of the element with the bottom of the parent element's font
  • sub: aligns the element as a subscript of the parent element
  • super: aligns the element as a superscript of the parent element
  • baseline-middle: aligns the baseline of the element with the middle of the parent element
  • inherit: inherits the value of the vertical-align property from its parent element

Note: The vertical-align property does not work with the block-level elements.


Example of Vertical-Align

Let's see an example of the vertical-align property,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS vertical-align</title>
    </head>
    <body>
        <p>
            The star <span class="baseline">⭐</span> is aligned to the baseline
            of the paragraph.
        </p>
        <p>
            The star <span class="length">⭐</span> is aligned by 10px relative
            to the baseline of the paragraph.
        </p>
        <p>
            The star <span class="sub">⭐</span> is aligned to the subscript of
            the paragraph.
        </p>
        <p>
            The star <span class="super">⭐</span> is aligned to the superscript
            of the paragraph.
        </p>
        <p>
            The star <span class="top">⭐</span> is aligned to the top of the
            paragraph.
        </p>
        <p>
            The star <span class="text-top">⭐</span> is aligned to the text-top
            of the paragraph.
        </p>
        <p>
            The star <span class="middle">⭐</span> is aligned to the middle of
            the paragraph.
        </p>

        <p>
            The star <span class="bottom">⭐</span> is aligned to the bottom of
            the paragraph.
        </p>
        <p>
            The star <span class="text-bottom">⭐</span> is aligned to the
            text-bottom of the paragraph.
        </p>
    </body>
</html>
p {
    border: 1px solid black;
    line-height: 2;
}

/* aligns span to the baseline of the parent element */
span.baseline {
    vertical-align: baseline;
}

/* aligns span by 10px relative to baseline of parent element */
span.length {
    vertical-align: 10px;
}

/* aligns span to subscript position */
span.sub {
    vertical-align: sub;
}

/* aligns span to superscript position */
span.super {
    vertical-align: super;
}

/* aligns span to the top of the parent element */
span.top {
    vertical-align: top;
}

/* aligns span to the top of the parent element's font */
span.text-top {
    vertical-align: text-top;
}

/* aligns span to the middle of the parent element */
span.middle {
    vertical-align: middle;
}

/* aligns span to the bottom of the parent element */
span.bottom {
    vertical-align: bottom;
}

/* aligns span to the bottom of the parent element's font */
span.text-bottom {
    vertical-align: text-bottom;
}

Browser Output

CSS Vertical Align Example Description

The above example demonstrates the working of different values of the vertical-align property.

Note: The vertical-align property is commonly used to align images with the surrounding text and the content inside of the table cell.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges