CSS Vertical-align

CSS vertical-align Property – Align Inline Elements Vertically

The vertical-align property in CSS is used to align inline or inline-block elements vertically within their containing element. It is especially useful for aligning elements like text, images, and buttons vertically relative to their parent or sibling elements.

Syntax

element {
    vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit | initial | unset;
}

Property Values

  • baseline: This is the default value. The element is aligned with the baseline of its parent element (the line on which text sits).
  • sub: Aligns the element with the subscript position, lowering it below the baseline.
  • super: Aligns the element with the superscript position, raising it above the baseline.
  • top: Aligns the element with the top of its parent’s font height.
  • text-top: Aligns the element with the top of the parent element’s text.
  • middle: Aligns the element with the middle of the line height of its parent.
  • bottom: Aligns the element with the bottom of the parent’s font height.
  • text-bottom: Aligns the element with the bottom of the parent’s text.
  • inherit: Inherits the vertical-align value from its parent element.
  • initial: Sets the property to its default value (baseline).
  • unset: Resets the property to either the inherited or initial value, depending on the context.

How vertical-align Works

  • The vertical-align property works for inline elements, inline-block elements, and table-cell elements.
  • When applied to inline or inline-block elements, it adjusts their alignment in relation to their parent or surrounding elements.
  • It doesn’t work on block-level elements unless they are displayed as inline or inline-block.

Examples

Example 1: Aligning Inline Text and Image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <p>Here is some text <img src="example.jpg" alt="example image"> with an image.</p>
</body>
</html>

Try It Now

In this example, the image will be aligned vertically in the middle of the surrounding text.

Example 2: Using vertical-align with inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }

        .text {
            display: inline-block;
            vertical-align: middle;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="text">Aligned Text</div>
</body>
</html>

Try It Now

Here, the .text element is vertically aligned to the middle of the .box element using vertical-align: middle.

Example 3: Aligning Superscript and Subscript Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        sup {
            vertical-align: super;
        }

        sub {
            vertical-align: sub;
        }
    </style>
</head>
<body>
    <p>Normal text <sup>superscript</sup> and <sub>subscript</sub>.</p>
</body>
</html>

Try It Now

In this example, the sup element is aligned as superscript above the baseline, and the sub element is aligned as subscript below the baseline.

Use Cases

  • Aligning images with text: When you want images or icons to line up nicely with text, vertical-align is useful to ensure they appear at the right height.
  • Centering content: Use vertical-align: middle to align inline or inline-block elements to the middle of their container.
  • Subscripts and superscripts: Use vertical-align: sub and vertical-align: super to position text in subscript and superscript styles.

Tips

  • Inline and inline-block elements: Remember that vertical-align primarily affects inline elements or inline-block elements. It won’t work on block-level elements unless you change their display type.
  • Consistency: When aligning multiple elements, make sure the alignment value is consistent across all elements that need to be aligned.
  • Responsive layouts: vertical-align can be particularly useful in flexible and responsive layouts, such as when aligning icons, buttons, or other inline elements in navigation menus.

The vertical-align property is a simple yet powerful tool for fine-tuning the vertical positioning of elements in your web design, making it especially useful when working with inline or inline-block elements.