TailwindCSS - 如何在图片下方居中标题

Question

我正在尝试使用 Tailwind 使图像及其标题居中。

标题有时可能比图片长。我希望它们以两者中较长的那个为中心。

tailwind documentation 表示使用 justify-center 沿容器主轴中心对齐项目。

它给出了这个例子：

<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

然而，当我尝试做类似的事情时，项目没有居中：

<div class="grid grid-cols-1 justify-center">
    <div><img src="http://placeimg.com/128/128" class="h-12" /></div>
    <div class="text-xs text-gray-800">Long Caption</div>
    <div class="text-xs text-gray-800">Short</div>
</div>

https://play.tailwindcss.com/EcjTbco47I

我做错了什么以及如何让这些项目在包含块中居中？

Answer 1

由于网格是 grid-cols-1，因此它只有一列。

所以三个 div 都占据了整个宽度。所以居中每个 div.

<div class="grid grid-cols-1 justify-center">
    <div class="flex justify-center"><img src="http://placeimg.com/128/128" class="h-12" /></div>
    <div class="flex justify-center text-xs text-gray-800">Long Caption</div>
    <div class="flex justify-center text-xs text-gray-800">Short</div>
</div>

Answer 2

justify-items-center 就可以了。

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

<div class="grid grid-cols-1 justify-items-center">
    <div><img src="http://placeimg.com/128/128" class="h-12" /></div>
    <div class="text-xs text-gray-800">Long Caption</div>
    <div class="text-xs text-gray-800">Short</div>
</div>

TailwindCSS - 如何在图片下方居中标题

TailwindCSS - How to centre caption underneath image

tailwind-css