Tailwind CSS Vertical Alignment

Tailwind CSS provides vertical alignment utilities to control the vertical position of inline, inline-block, and table-cell elements. These utilities are alternatives to the CSS vertical-align property and help align text, images, and other inline content.

Vertical Alignment Classes

align-baseline: Aligns the element's baseline with the baseline of its parent.
align-top: Aligns the element with the top of the line box.
align-middle: Aligns the element's middle with the baseline plus half the x-height of the parent.
align-bottom: Aligns the element with the bottom of the line box.
align-text-top: Aligns the element's top with the top of the parent element's font.
align-text-bottom: Aligns the element's bottom with the bottom of the parent element's font.
align-sub: Aligns the element as a subscript.
align-super: Aligns the element as a superscript.
align-[<value>]: Sets vertical alignment using a custom value.
align-(<custom-property>): Sets vertical alignment using a CSS custom property.

Syntax

<element class="align-{value}">...</element>

Here, value represents the desired vertical alignment utility.

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Vertical Alignment</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="p-6">
    <h1 class="text-3xl font-bold text-green-600 mb-4">
        GeeksforGeeks
    </h1>

    <h2 class="text-xl font-semibold mb-4">
        Tailwind CSS Vertical Alignment
    </h2>

    <div class="space-y-4">
        <p>
            align-baseline:
            Text
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
                 alt="Example image"
                 class="inline-block align-baseline w-10">
        </p>

        <p>
            align-top:
            Text
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
                 alt="Example image"
                 class="inline-block align-top w-10">
        </p>

        <p>
            align-middle:
            Text
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
                 alt="Example image"
                 class="inline-block align-middle w-10">
        </p>

        <p>
            align-bottom:
            Text
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
                 alt="Example image"
                 class="inline-block align-bottom w-10">
        </p>

        <p>
            align-text-top:
            Text
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
                 alt="Example image"
                 class="inline-block align-text-top w-10">
        </p>

        <p>
            align-text-bottom:
            Text
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
                 alt="Example image"
                 class="inline-block align-text-bottom w-10">
        </p>

        <p>
            align-sub: H<span class="align-sub text-sm">2</span>O
        </p>

        <p>
            align-super: x<span class="align-super text-sm">2</span>
        </p>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays images aligned with text using different vertical alignment utilities. The align-sub and align-super utilities demonstrate subscript and superscript positioning.

Tailwind CSS Vertical Alignment

Vertical Alignment Classes

Syntax

Explore