如何在 Tailwind 中分别设置水平和垂直位置？

Tailwind 是一种快速构建 Web 应用程序的工具包，可以使你更容易地编写 HTML 和 CSS 代码。在这篇文章中，我们将讨论如何在 Tailwind 中分别设置水平和垂直位置。

水平对齐

在 Tailwind 中，控制元素水平对齐的类主要是 justify-* 和 items-*。justify-* 用于控制 flex 容器中子元素的水平对齐，而 items-* 用于控制 flex 容器中子元素的垂直对齐。

常用的 justify-* 类如下：

• justify-start：子元素靠左对齐
• justify-end：子元素靠右对齐
• justify-center：子元素居中对齐
• justify-between：子元素沿主轴均匀分布
• justify-around：子元素沿主轴均匀分布，且在子元素间留有相同的间距
• justify-evenly：子元素沿主轴均匀分布，且在子元素间留有相同的空间

示例代码：

<div class="flex justify-center">
  <div class="bg-red-600 w-20 h-20"></div>
  <div class="bg-green-600 w-20 h-20"></div>
  <div class="bg-blue-600 w-20 h-20"></div>
</div>

上面的代码将创建一个具有 3 个 div 元素的 flex 容器，它们沿着主轴居中。每个子元素都有宽度为 20 像素和高度为 20 像素。背景颜色分别为红色、绿色和蓝色。

垂直对齐

与水平对齐类似，控制元素垂直对齐的类主要是 justify-* 和 items-*。但是，它们被用于不同的元素。

常用的 items-* 类如下：

• items-start：子元素顶部对齐
• items-end：子元素底部对齐
• items-center：子元素居中对齐
• items-baseline：子元素基线对齐
• items-stretch：子元素拉伸以占满容器的高度

示例代码：

<div class="flex items-center">
  <div class="bg-red-600 w-20 h-20"></div>
  <div class="bg-green-600 w-20 h-10"></div>
  <div class="bg-blue-600 w-20 h-30"></div>
</div>

上面的代码将创建一个具有 3 个 div 元素的 flex 容器，它们沿着主轴居中，并且垂直对齐于它们各自的中心。背景颜色分别为红色、绿色和蓝色。子元素的高度分别为 20、10 和 30 像素。

总结

通过使用 Tailwind，我们可以很容易地控制元素的水平和垂直对齐。简单但有用的 justify-* 和 items-* 类可以帮助我们轻松掌握这一技术，并快速实现自己的设计。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0c5bd48841e9894ce12ca