如何用CSS居中图片并左对齐多行标题（无需指定容器宽度）

当然可以实现，而且完全不需要指定固定容器宽度。你之前用display: table的方案失效，是因为当标题内容过长时，table容器会被标题撑开，宽度超过图片本身。下面是两种靠谱的解决方案：

方案一：利用width: fit-content #

这种方式最直观，让容器宽度自适应图片尺寸，再强制标题宽度和容器一致：

.image-wrapper {
  margin: 0 auto;
  width: fit-content; /* 容器宽度匹配图片宽度 */
}
.caption {
  width: 100%; /* 标题宽度和容器（即图片）保持一致 */
  text-align: left;
}

<div class="container">
  <div class="image-wrapper">
    <img src="https://picsum.photos/200/300" alt="Image">
    <div class="caption">Your Caption Text Here But What If It Spans Multiple Lines</div>
  </div>
</div>

方案二：CSS Grid布局 #

利用Grid的列宽自适应特性，让标题和图片共享同一列宽度：

.image-wrapper {
  display: grid;
  margin: 0 auto;
  justify-items: start; /* 标题左对齐 */
}
.caption {
  grid-column: 1; /* 强制标题和图片在同一列，继承图片宽度 */
}

对应的HTML结构和你原来的一致，不需要改动。

这两种方案都能实现：图片整体居中，标题左对齐，多行时宽度严格和图片保持一致，完全不用写死任何宽度值。

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