Tailwind CSS - Vertical Align

Tailwind CSS: Vertical Alignment

The vertical-align utilities control how inline-level elements are aligned with the text around them. They are perfect for fine-tuning the position of icons, badges, and other elements within a line of text.

Critical Distinction: vertical-align vs. Flexbox/Grid Alignment

This is a very common point of confusion for beginners. The align-* utilities documented here only work on inline, inline-block, and table-cell elements.

• To vertically align block-level items within a container, you should use Flexbox or Grid utilities.
• Wrong: <div class="flex align-middle">...</div>
• Correct: <div class="flex items-center">...</div> or <div class="grid place-items-center">...</div>

Vertical Align Utilities

Here are the classes for controlling vertical alignment within a line of text.

Class	CSS Properties	Effect
align-baseline	vertical-align: baseline;	Aligns the element’s baseline with its parent’s baseline. (Default)
align-top	vertical-align: top;	Aligns the top of the element with the top of the entire line.
align-middle	vertical-align: middle;	Aligns the middle of the element with the middle of the parent’s text.
align-bottom	vertical-align: bottom;	Aligns the bottom of the element with the bottom of the entire line.
align-text-top	vertical-align: text-top;	Aligns the top of the element with the top of the parent’s text.
align-text-bottom	vertical-align: text-bottom;	Aligns the bottom of the element with the bottom of the parent’s text.
align-sub	vertical-align: sub;	Aligns the element as a subscript.
align-super	vertical-align: super;	Aligns the element as a superscript.

Practical Example: Aligning Icons and Badges

A common use case for vertical-align is to align an icon neatly next to text. The align-middle class is often the best choice for this, making the layout look balanced and professional.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Align Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-100">

  <h2 class="text-2xl font-bold mb-6 text-gray-800">User Status</h2>

  <div class="space-y-4 text-lg text-gray-700">
    <p>
      <!-- Icon aligned with the middle of the text -->
      <span class="inline-block w-6 h-6 rounded-full bg-green-500 **align-middle** mr-2"></span>
      Jane Doe (Online)
    </p>

    <p>
      <!-- A badge aligned to the baseline -->
      John Smith
      <span class="inline-block bg-blue-200 text-blue-800 text-xs font-semibold px-2 py-0.5 rounded-full **align-baseline**">Admin</span>
    </p>

    <p>
      <!-- Using align-super for a notification count -->
      Notifications <span class="inline-block bg-red-500 text-white text-xs w-5 h-5 text-center leading-5 rounded-full **align-super**">3</span>
    </p>

    <p>
      <!-- Comparing middle and bottom alignment -->
      This is <span class="**align-middle** font-bold">middle</span> aligned vs. this is <span class="**align-bottom** font-bold">bottom</span> aligned.
    </p>
  </div>

</body>
</html>