在不适合列的网格中居中子项

Question

我正在使用 Tailwind，我有一个网格布局，我希望不适合列的子项居中。我试过 justify-items-center 和 place-items-center 但都没有任何作用。

例如在此example中，我希望底部两个居中。

Answer 1

有一些非常有趣和有创意的方法可以将不均匀的元素居中放置在 CSS 网格的最后一行。他们都试图回避这样一个事实，即 CSS 网格并不是解决问题的正确方法。

您可以在此处详细了解原因：

最好的方法是改用 flexbox。

这是一个粗略的演示：https://play.tailwindcss.com/37YqZZUE0o。

这可能不是您想要的行为，但可以根据需要对其进行调整以完成您的目标。

Answer 2

我首先将 grid 替换为 flex，因为 grid 不适合整行对齐。可以找到详细的解释.

话虽如此，这是我建议的使用 flex 的解决方案。

<script src="https://cdn.tailwindcss.com"></script>

<div class="my-12 flex flex-wrap justify-center gap-4">
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
</div>

在不适合列的网格中居中子项

Center children in a grid that don't fit column

html

css

tailwind-css