如何设置HTML图片下方的figcaption标题文本居中对齐

你可以通过以下两种常用方式实现需求：

• 方案一：直接给figcaption添加文本居中规则
  该方案不需要修改你现有的图片居中样式，新增CSS规则即可生效：

figcaption {
  text-align: center;
}

如果需要仅对当前图片对应的figcaption生效，可通过类名做范围限定：
HTML部分修改为：

<figcaption class="img-caption">Choose from are variety of t-shirt colors</figcaption>

CSS对应新增规则：

.img-caption {
  text-align: center;
}

• 方案二：统一调整figure容器样式，实现图片和figcaption同步居中适配
  这个方案可以让figcaption的居中范围和图片宽度保持一致，视觉效果更贴合：

/* 可移除原有的.image1的左右margin设置，替换为如下规则 */
figure {
  width: fit-content;
  margin: 0 auto;
}
figcaption {
  text-align: center;
  /* 可按需添加上边距拉开与图片的间距 */
  margin-top: 6px;
}

内容的提问来源于stack exchange，提问作者Landon Byrd