Bootstrap行内figure居中问题：图片居中后figcaption被挤压如何解决？

直接给你可行的解决方案，核心是利用Bootstrap的flex和布局类，让figure整体居中同时保证figcaption正常展示：

• 调整结构层级，给figure套一个控制宽度的列容器，避免内容过度拉伸
• 给figure添加d-inline-block类，让它仅包裹自身内容宽度，解决figcaption被挤压的问题
• 配合row的justify-content-center实现整体水平居中

完整示例代码：

<div class="row justify-content-center">
  <p>你的段落内容</p>
  <!-- 可根据需求调整col-md-*的数值，控制最大宽度 -->
  <div class="col-md-8 col-sm-10 text-center">
    <a href="你的目标链接">
      <figure class="d-inline-block">
        <img src="图片地址" class="img-fluid" alt="图片描述">
        <figcaption class="mt-2 text-center">图片说明文字</figcaption>
      </figure>
    </a>
  </div>
</div>

关键类作用说明：

• justify-content-center：让row内部的列水平居中
• col-md-8 col-sm-10：限制figure所在容器的最大宽度，避免图片过宽，同时适配不同屏幕尺寸
• d-inline-block：让figure仅占据自身内容的宽度，确保figcaption自然排列在图片下方，不会被挤到角落
• img-fluid：保证图片响应式缩放，适配容器宽度
• mt-2：给figcaption添加上边距，和图片拉开间距，提升美观度

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