如何为已实现文字环绕的图片添加居中标题（HTML&CSS）

1. 避免拆分单元格，用容器嵌套实现图片+居中标题 #

直接在图片所在的表格单元格内嵌套容器，无需修改原有表格结构，即可实现标题居中且不打乱布局：

HTML 结构 #

<!-- 保留原有嵌套表格结构，仅在图片单元格内添加容器 -->
<table class="content-table">
  <tr>
    <!-- 左侧文字单元格，设置垂直对齐 -->
    <td class="text-cell">
      这里是长度不固定的环绕文字，会自动与右侧图片保持垂直居中对齐...
    </td>
    <!-- 右侧图片单元格 -->
    <td class="img-cell">
      <div class="img-with-caption">
        <img src="your-image-url.jpg" alt="图片描述">
        <div class="img-caption">这里是行数不固定的图片标题，会自动居中显示</div>
      </div>
    </td>
  </tr>
</table>

CSS 样式 #

/* 图片容器：确保标题在图片下方居中 */
.img-with-caption {
  text-align: center;
  width: fit-content; /* 容器宽度自适应图片，避免强制宽度导致布局错乱 */
  margin: 0 auto; /* 容器在单元格内居中 */
}

/* 标题样式：实现黑底白字斜体+边框效果 */
.img-caption {
  background-color: #000;
  color: #fff;
  font-style: italic;
  padding: 4px 8px;
  border: 1px solid #ccc;
  margin-top: 4px;
  width: fit-content; /* 标题宽度自适应文字，保持居中 */
  margin-left: auto;
  margin-right: auto;
}

/* 处理文字与图片的垂直对齐 */
.content-table .text-cell,
.content-table .img-cell {
  vertical-align: middle; /* 强制单元格内容垂直居中，替代手动换行对齐 */
}

.content-table .img-cell {
  padding-left: 16px; /* 文字和图片之间留间距优化排版 */
  width: fit-content; /* 图片单元格自适应宽度，不挤压文字空间 */
}

2. 修复 <figure> 标签在 Chrome 中的样式问题 #

如果坚持使用 <figure>，问题通常是浏览器默认样式或表格样式优先级覆盖导致的，通过重置样式即可解决：

HTML 结构 #

<td class="img-cell">
  <figure class="img-figure">
    <img src="your-image-url.jpg" alt="图片描述">
    <figcaption>这里是图片标题</figcaption>
  </figure>
</td>

CSS 样式 #

/* 重置 figure 默认边距，避免布局偏移 */
.img-figure {
  margin: 0;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

/* 强制标题样式生效，覆盖表格默认样式优先级 */
.img-figure figcaption {
  background-color: #000 !important;
  color: #fff !important;
  font-style: italic !important;
  padding: 4px 8px;
  border: 1px solid #ccc;
  margin-top: 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

3. 自适应兼容要点 #

• 所有容器和单元格使用 width: fit-content，确保无论图片尺寸、标题行数、文字长度如何，都能自适应布局，不会出现溢出或挤压
• 用 vertical-align: middle 统一设置单元格内容垂直对齐，替代手动换行对齐的粗糙方式
• 不修改原有嵌套表格的结构，仅在内部添加容器，降低布局崩溃风险

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