图片默认左对齐时如何实现图注相对于图片居中

问题原因 #

你当前使用的table元素默认宽度为100%撑满父容器，<caption>设置的text-align: center是相对于整个表格的宽度生效，所以会对齐到页面中心，而非对应下方图片的中心。

解决方案 #

只需给.image表格增加宽度自适应配置，让表格宽度自动收缩到和内部图片宽度一致即可：

.image {
  width: fit-content;
}
.image .caption {
  font-size: x-small;
  font-family: Verdana, Arial, sans-serif;
  text-align: center;
}

修改后整个表格的宽度和内部图片宽度完全匹配，caption的居中范围就会和图片对齐，同时表格默认左对齐的特性不变，符合你图片靠左的需求。

可选语义化优化方案 #

如果不需要保留table布局，可以用HTML5原生的<figure>、<figcaption>标签实现更简洁的语义化结构，效果完全一致：

<figure class="image-wrapper">
  <a href="post003.html">
    <img src="disn_d5xcaazpjz-1-1.jpg" alt="Mary Magdalene’s skull on display in France" />
  </a>
  <figcaption class="image-caption">
    Mary Magdalene’s supposed skull on display in Southern France.<br> Copyright © 2021 Magdalene Publishing
  </figcaption>
</figure>

对应CSS：

.image-wrapper {
  width: fit-content;
  margin: 0;
}
.image-caption {
  font-size: x-small;
  font-family: Verdana, Arial, sans-serif;
  text-align: center;
}

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