Html 将标题与图像对齐

我在人像中有一个图像。该图像具有以下样式：

height: 300px;
max-width: 300px;
display: block;
margin: 0 auto;

图像必须居中

图像下方的标题必须与图像的左下角对齐，且宽度不得超过图像

图像可以是任意大小，因此固定figcaption的宽度和偏移量将不起作用

我能想到的唯一一件事就是把这个图形做成内联块，但是图像是左对齐的，我需要它居中

---

任何人都能想出解决方案。

显示：表格

+

页边距：自动

作为基础，也很好

图{
显示：表格；
保证金：自动；
宽度：1%；/*将扩展到最宽的元素图像或长单词*/
}
img{
最大宽度：300px；/*如果需要*/
/*无需重置显示以避免浏览器混淆*/
}
菲卡普顿{
显示：表格行；/*在表格显示容器表格页脚组中的上一个标记下堆叠也有效*/
}

伊斯特伍德。伊斯特伍德。伊斯特伍德。伊斯特伍德。伊斯特伍德。伊斯特伍德

请尝试以下操作：

figure{
  margin: 0 auto;
  max-width: 300px;
}

img{
  height: 300px
}

---

谢谢，但这不适用于较长的标题：@panthro哦，是的，忘了这个：fix=>代码段已更新