如何居中使用figure/figcaption标签的图片？响应式布局适配问题

嘿Marco，我来帮你搞定这个兼顾移动端和小屏幕的图片布局需求！咱们一步步来：

1. HTML结构：用figure+figcaption包裹图片 #

首先按照要求，把每张图片都放在<figure>标签里，图片说明用<figcaption>，这样语义化更清晰，也方便统一控制样式：

<div class="article-container">
  <p>这里是文章的正文内容，比如一段描述性文字...</p>
  
  <figure>
    <img src="你的图片地址.jpg" alt="图片的替代文本">
    <figcaption>这是图片的说明文字</figcaption>
  </figure>
  
  <p>继续你的文章内容...</p>
  
  <figure>
    <img src="另一张图片地址.jpg" alt="另一张图片的替代文本">
    <figcaption>另一张图片的说明</figcaption>
  </figure>
</div>

2. CSS样式：搞定间距、响应式和居中 #

接下来是核心的样式设置，完全满足你的需求：

/* 容器设置：左右各15px间距，适配小屏幕 */
.article-container {
  margin: 0 15px;
  /* 可选：限制最大宽度，防止大屏幕下内容太宽 */
  max-width: 1200px;
  /* 可选：让容器在大屏幕居中 */
  margin-left: auto;
  margin-right: auto;
}

/* 清除figure默认的边距，确保图片无额外间距 */
.article-container figure {
  margin: 0;
  /* 让图片和说明文字都居中 */
  text-align: center;
  /* 可选：给figure加上下间距，区分文章段落和图片 */
  margin: 20px 0;
}

/* 响应式图片核心样式 */
.article-container figure img {
  /* 图片最大宽度不超过容器宽度，自动缩放 */
  max-width: 100%;
  /* 保持图片比例，避免拉伸变形 */
  height: auto;
  /* 去掉图片默认的inline元素间距 */
  display: block;
  /* 当图片宽度小于容器时，自动居中（配合figure的text-align:center也可以，这里用margin更稳妥） */
  margin: 0 auto;
}

/* 可选：给图片说明加点样式，提升可读性 */
.article-container figure figcaption {
  margin-top: 8px;
  color: #666;
  font-size: 0.9em;
}

关键效果说明： #

• 容器间距：.article-container的margin: 0 15px直接给左右留出15px，移动端浏览时不会贴边；加上max-width和自动左右margin，大屏幕下内容不会太宽，阅读更舒适。
• 图片无间距：清除了<figure>默认的边距，避免图片周围出现多余空白。
• 响应式适配：img的max-width:100%+height:auto保证：
  • 当图片尺寸小于容器宽度时，margin:0 auto（或figure的text-align:center）会让图片居中显示；
  • 当图片尺寸大于容器宽度时，图片会自动缩小到容器的100%宽度，同时保持原有比例，不会溢出容器。

这样设置后，不管是手机、平板还是桌面端，图片都能完美适配容器，布局美观又实用！

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