html - 在元素两侧均匀分布溢出文本

Question

我遇到了以下问题: 我有一个<figure> , 谁的<figcaption>可能会溢出 <figure> .您可以在下面的 fiddle 中看到:

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  width:300px;
  height:500px;
}
img{
  width:100%;
}
figcaption{
  position:relative;
  top:-50px;
  display:inline-block;
  font-size:3em;
  white-space:nowrap;
  text-align:center;
  font-weight:bold;
  width:100%;
}

<figure>
<img src="https://www.zooroyal.de/magazin/wp-content/uploads/2017/03/Golden-Retriever-760x560.jpg">
<figcaption>Golden Retriever</figcaption>
</figure>

我想要实现的是文本仍然在 <figure> 中居中, 无论文本是否比图形宽。

我想不出一个可能的解决方案。有谁知道实现这一目标的方法？请不要使用 JavaScript。

Answer 1

使用这些样式:

    figcaption {
        position:relative;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }

希望这是你想要实现的。