How to centre caption underneath image with TailwindCSS

在使用 Tailwind CSS 时，我们可以通过一系列的工具类来实现图片和标题的布局。具体来说，如果要在图片下方居中显示标题，可以如下操作：

步骤 1: 创建一个容器

首先，我们需要一个容器来包裹图片和标题，确保它们作为一个单元一起布局。

html
<div class="flex flex-col items-center">
  <!-- Image -->
  <!-- Title -->
</div>

这里，flex 初始化了一个灵活的布局容器，flex-col 确保子元素（图片和标题）垂直堆叠，items-center 则确保所有子元素在水平方向上居中对齐。

步骤 2: 插入图片

在这个容器内，首先插入图片元素：

html
<img src="path/to/image.png" alt="Descriptive Alt Text" class="max-w-full h-auto">

这里，max-w-full 确保图片宽度不会超过其容器的宽度，h-auto 则保持图片的原始宽高比。

步骤 3: 添加标题

在图片下方添加标题：

html
<p class="text-center mt-2">
  这是图片标题
</p>

text-center 类用来确保标题文本在其容器内居中对齐。mt-2 类则添加了一点垂直间隔（margin-top），以便在视觉上将标题与图片稍作分离。

完整代码示例

将上述步骤综合起来，我们的HTML结构将如下所示：

html
<div class="flex flex-col items-center">
  <img src="path/to/image.png" alt="Descriptive Alt Text" class="max-w-full h-auto">
  <p class="text-center mt-2">
    这是图片标题
  </p>
</div>

通过这种方式，我们不仅保持了代码的简洁性，也利用 Tailwind CSS 的工具类快速实现了需求。这种方法的优点是响应式友好，并且可以轻松地通过更改工具类来调整布局和样式，非常方便在项目中进行迭代和维护。