Question

我遇到以下问题：我有一个<figure>，其<figcaption>可能会溢出<figure>。您可以在下面的小提琴中看到它：

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

使用以下样式：

{
  "/api/*": {
    "target": "https://172.16.2.10",
    "secure": false,
    "pathRewrite": {
      "^/api/*": ""
    },
    "changeOrigin": true
  }
}

希望这是您想要实现的。

Answer 2

另一种实现方法：

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  text-align:center;
}
img{
  width:300px;

}
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>

Answer 3

这可能就是您想要的。

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  width:300px;
  height:500px;
}
img{
  width:100%;
}
figcaption{
  position:relative;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    font-size:2em;
    white-space:nowrap;
    text-align:center;
    font-weight:bold;
}

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

在元素的两侧平均分配溢出文本

3 个答案: