Tailwind CSS - Vertical Alignment

Previous
Quiz
Next

Tailwind CSS Vertical Alignment is a collection of predefined classes that control the vertical alignment of elements within their containing elements or layouts.

Tailwind CSS Vertical Alignment Classes

Below is a list of Tailwind CSS Vertical Alignment classes with properties that control the vertical alignment of text.

Class CSS Properties
align-baseline vertical-align: baseline;
align-top vertical-align: top;
align-middle vertical-align: middle;
align-bottom vertical-align: bottom;
align-text-top vertical-align: text-top;
align-text-bottom vertical-align: text-bottom;
align-sub vertical-align: sub;
align-super vertical-align: super;

Functionality Of Tailwind CSS Vertical Alignment Classes

  • align-baseline: Aligns the element's baseline with its parent's baseline.
  • align-top: Positions the element at the top of its parent container.
  • align-middle: Centers the element vertically inside its parent.
  • align-bottom: Positions the element at the bottom of its parent.
  • align-text-top: Aligns the top of the element's text with the top of its parent's text.
  • align-text-bottom: Aligns the bottom of the element's text with the bottom of its parent's text.
  • align-sub: Lowers the element below the parent's baseline.
  • align-super: Raises the element above the parent's baseline.

Tailwind CSS Vertical Alignment Class Examples

Below are examples of Tailwind CSS Vertical Alignment classes that show how elements can be vertically aligned within their containers.

Exploring Vertical Alignment Options

This example shows how Tailwind CSS Vertical Alignment enables vertical alignment using classes like align-baseline, align-top, align-middle, and align-bottom. The following code shows how each class influences the vertical positioning of text within the layout.

Example

 
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Vertical Alignment
    </h2>
    <div class="grid  space-y-4"> 
        <p class="border border-gray-400 p-2">This text is
            <span class="align-baseline font-bold">
                aligned to the baseline,
            </span>
            after baseline alignment example.
        </p>
        
        <p class="border border-gray-400 p-2">This text is
            <span class="align-top font-bold">
                aligned to the top,
            </span>
            after top alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-middle font-bold">
                aligned in the middle,
            </span>
            after middle alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-bottom font-bold">
                aligned to the bottom,
            </span>
            after bottom alignment example.
        </p>
    </div>
</body>

</html>

Advanced Vertical Alignment Options

This example shows some advanced vertical alignment techniques in Tailwind CSS using classes like align-text-top, align-text-bottom, align-sub, and align-super. The below code shows how these classes accurately control the vertical alignment and positioning of text within a structured layout.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 "> 
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Vertical Alignment
    </h2>
    <div class="grid space-y-4">
        <p class="border border-gray-400 p-2">This text is
            <span class="align-text-top font-bold">
                aligned to the text top,
            </span>
            after text top alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-text-bottom font-bold">
                aligned to the text bottom,
            </span>
            after text bottom alignment example.
        </p>

        <p class="border border-gray-400 p-2">This text is
            <span class="align-sub font-bold">
                aligned as subscript,
            </span>
            after subscript alignment example.
        </p>
        <p class="border border-gray-400 p-2">This text is
            <span class="align-super font-bold">
                aligned as superscript,
            </span>
            after superscript alignment example.
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next