如何在 Tailwind css 中居中显示项目

Question

如何在 Tailwind 中将小尺寸的内容或项目居中。我做了 Tailwind 中可用的所有对齐类，但它不起作用。这是顺风V3

<div class="bg-white pb-8">
  <div class="p-4 pb-0 bg-third-bg sm:max-w-7xl mx-auto">
    <div class="sm:flex sm:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:items-center sm:justify-between bg-white p-6">
      <div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
        <div class="sm:flex">
          <img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
        </div>
        <div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
        <div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
      </div>
      <div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
        <div class="sm:flex">
          <img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
        </div>
        <div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
        <div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
      </div>
      <div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
        <div class="sm:flex">
          <img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma2.png" alt="" />
        </div>
        <div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
        <div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
      </div>
    </div>
  </div>
</div>

https://play.tai​​lwindcss.com/dBKsusYFvi?size=540x720

Answer 1

这通常是通过 Tailwindflex或 来完成的grid。

因为看起来您已经flex在使用，所以我首先包含了该示例。

1. 弹性

如果您打算使用 Tailwind flex，请将您的物品包装在一个满足您所需的容器flex中justify-center。请记住，这些类需要位于您想要居中的项目的直接父元素上。

<div class="flex justify-center">
  <div>centered item</div>
</div>

sm下面的示例会将样式应用到等于或大于Tailwind 主题中指定的任何尺寸的屏幕，或者480px默认值 - 相当于@media (min-width: 480px).

<div class="sm:flex sm:justify-center">
  <div>centered item</div>
</div>

您可以运行以下代码片段来进行说明：

<div class="flex justify-center">
  <div>centered item</div>
</div>

2. 网格

对于grid，您只需要一个带有grid和 的父级justify-items-center。

<div class="sm:flex sm:justify-center">
  <div>centered item</div>
</div>

我也一定要查看文档，它们提供了大量示例，非常有帮助。