-1

如何在 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

4

2 回答 2

1

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

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

下面的示例会将样式应用到等于或大于smTailwind 主题中分配的任何大小的屏幕，或者480px默认情况下 - 相当于@media (min-width: 480px).

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

我一定要查看文档，它们对大量示例很有帮助。

于 2022-02-23T21:00:22.070 回答
0

我发现我必须使用 grid justify-items 来解决这个问题

<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="grid justify-items-center text-center">
                <img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
                <div class="text-xl font-bold">Lorem ipsum dolor sit</div>
                <div class="">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
            </div>
            <div class="grid justify-items-center">
                <img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
                <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="grid justify-items-center">
                <img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma2.png" alt="" />
                <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>
于 2022-02-25T08:37:12.737 回答