Tailwind CSS 对齐完整参考

Tailwind CSS 是一种实用的 CSS 框架，它提供了大量的工具类让我们快速地实现对齐样式。本文将为大家提供完整的 Tailwind CSS 对齐参考，帮助你更好地使用这个框架。

水平对齐

Tailwind CSS 提供了以下工具类用于调整水平对齐：

• text-left：左对齐
• text-center：居中对齐
• text-right：右对齐
• text-justify：两端对齐

示例代码：

<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>

垂直对齐

Tailwind CSS 提供了以下工具类用于调整垂直对齐：

• align-baseline：基线对齐
• align-top：顶部对齐
• align-middle：中间对齐
• align-bottom：底部对齐
• align-text-top：文本顶部对齐
• align-text-bottom：文本底部对齐

以上对齐类一般在和 flex 一起使用，例如：

<div class="flex items-center justify-center h-48 bg-gray-200">
  <div class="h-8 w-8 bg-red-500 flex items-center justify-center">
    <p class="text-white text-xs">ABC</p>
  </div>
  <p class="text-gray-700 text-sm ml-2">文本在右侧居中</p>
</div>

对齐基础

Tailwind CSS 友好的提供了以下基础对齐：

• self-start：拉伸项始终对齐容器中的开始边缘。
• self-center：拉伸项始终在容器上下中心对齐。
• self-end：拉伸项始终对齐容器中的结束边缘。
• self-stretch：拉伸项始终填充空白空间。
• self-auto：拉伸项将保留其自身大小。

对齐基础可以在 flex items- 和 grid items- 前面添加，例如：

<div class="flex items-center self-center justify-center h-48 bg-gray-200">
  <p>这个文本项将始终在中央</p>
</div>

对齐增强

Tailwind CSS 还提供了更加细致和深入的对齐设置：

• self-start：拉伸项目始终对齐容器的开始边缘。
• self-center：拉伸项目始终在容器上下中心对齐。
• self-end：拉伸项目始终对齐容器的结束边缘。
• self-stretch：拉伸项始终填充空白空间。
• self-auto：拉伸项将保留其自身大小。
• self-baseline：拉伸项始终对齐容器的基线。

对齐增强可以在 flex items- 和 grid items- 前面添加，例如：

<div class="flex items-center self-center justify-center h-48 bg-gray-200">
  <p>这个文本项将始终在中央</p>
</div>

总结

Tailwind CSS 提供了丰富的对齐相关的工具类和设置，可以让我们更快速地实现完美的对齐效果。通过本篇文章的介绍，相信大家对 Tailwind CSS 的对齐部分有了更深入的了解，并且能够熟练地运用它实现我们所需要的对齐效果。