Tailwind CSS - 垂直对齐

Tailwind CSS：垂直对齐

vertical-align 工具类控制内联级元素如何与其周围文本对齐。它们非常适合微调图标、徽章和其他元素在文本行中的位置。

重要区别：vertical-align 与 Flexbox/Grid 对齐

这是初学者非常常见的混淆点。 这里文档中介绍的 align-* 工具类仅适用于 inline、inline-block 和 table-cell 元素。

• 要在容器中垂直对齐块级（block-level）项目，你应该使用 Flexbox 或 Grid 工具类。
• 错误： <div class="flex align-middle">...</div>
• 正确： <div class="flex items-center">...</div> 或 <div class="grid place-items-center">...</div>

垂直对齐工具类

以下是控制文本行内垂直对齐的类名。

类名（Class）	CSS 属性（CSS Properties）	效果（Effect）
align-baseline	vertical-align: baseline;	将元素的基线（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;	将元素作为上标对齐。

实用示例：对齐图标和徽章

vertical-align 的一个常见用例是将图标整齐地与文本并列。align-middle 类通常是最佳选择，使布局看起来平衡且专业。

<!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 -->
      <!-- 使用 align-super 作为通知计数 -->
      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>