我有一個圖像瀏覽器，可以用& lt圖標題& gt。懸停/聚焦時& lt圖標題& gt顯示在圖像底部上方(因此圖像保持全屏)。為了保證圖像顯示的一致性，我手動設置了& lt圖標題& gt的高度，以便它不會根據其中包含的文本調整大小。

通常，當我想讓一個元素將文本垂直居中時，我只需將它轉換成一個flex容器并align-items:center；。唉，問題來了。

我展示的是來自大自然的圖片，通用名和學名都包含在& lt圖標題& gt。標準做法是將學名斜體。當我把& lt我& gt在部分文本中，flex將文本轉換成三個不同的框:前斜體文本、斜體文本和后斜體文本。然后，如果文本溢出了它的容器，它會在每個框中換行。

所以這個:

<figcaption> A juvenile black-headed gull <i>(Chroicocephalus ridibundus)</i> vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.</figcaption>

A juvenile black-headed gull (Chroicocephalus ridibundus) vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.

變成了這樣:

A juvenile black-headed   (Chroicocephalus    vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, 
       gull                 ridibundus)                                   Estonia.

在這里你可以看得更清楚:https://imgur.com/JHLaaM5

以下是當前相關代碼的快照:

.figure {
  margin: auto;
  width: min-content; /* so the image will determine overall width */
  display: flex;
  flex-direction: column;
}

.image {
  max-height: 100%; /* keeps aspect ratio, and will adjust width accordingly */
}

.caption {
  font-size: 1.25rem;
  color: aliceblue;
  width: 100%; /* matches width of figure, which is set by the image via min-content */
  height: 6rem; /* fixed height for uniformity in figcaption's display on screen */

  /* moves the caption overtop the image, and makes it a bit see-through */
  position: relative;
  margin-top: -6rem;
  z-index: -1; /* this will be made visible on hover & on focus */
  background-color: rgba(0,0,0,0.75);

  /* vertical center */
  display: flex;
  align-items: center;

  /* horizontal center */
  text-align: center;
}

.figure:hover .caption, .figure:focus .caption{
  z-index: 2;
}

<figure class="figure">
  <img class="image" src="https://i.imgur.com/hs9BUEr.jpg" alt="A juvenile black-headed gull flying low over water" />
  <figcaption class="caption">A juvenile black-headed gull with extra placeholder text to show how silly ths whole thing is <i>(Chroicocephalus ridibundus)</i> vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.</figcaption>
</figure>

我已經找到了一個潛在的解決方案，盡管我不確定這是否符合WCAG無障礙指南。基于& lt上的MDN文檔圖標題& gt我可以在其中包含其他HTML元素，只要它們是流類型的元素。div & gts是。

所以我能做的就是插入一個& ltdiv & gt在& lt圖標題& gt既要實現垂直居中的目標，又要避免內容分成那三個討厭的列的陷阱。看起來是這樣的:

<figure>
  <img/>
  <figcaption>
    <div>Caption text goes here</div>
  </figcaption>
</figure>

并使用我最初提交的代碼來演示它的預期行為:

.figure {
  margin: auto;
  width: min-content; /* so the image will determine overall width */
  display: flex;
  flex-direction: column;
}

.image {
  max-height: 100%; /* keeps aspect ratio, and will adjust width accordingly */
}

.caption {
  font-size: 1.25rem;
  color: aliceblue;
  width: 100%; /* matches width of figure, which is set by the image via min-content */
  height: 6rem; /* fixed height for uniformity in figcaption's display on screen */

  /* moves the caption overtop the image, and makes it a bit see-through */
  position: relative;
  margin-top: -6rem;
  z-index: -1; /* this will be made visible on hover & on focus */
  background-color: rgba(0,0,0,0.75);

  /* vertical center */
  display: flex;
  align-items: center;

  /* horizontal center */
  text-align: center;
}

.figure:hover .caption, .figure:focus .caption{
  z-index: 2;
}

<figure class="figure">
  <img class="image" src="https://i.imgur.com/hs9BUEr.jpg" alt="A juvenile black-headed gull flying low over water" />
  <figcaption class="caption">
    <div>A juvenile black-headed gull [with extra placeholder text to show how silly this whole thing is if it breaks mid-sentence] <i>(Chroicocephalus ridibundus)</i> vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.
    </div>
  </figcaption>
</figure>

如果不在HTML中使用斜體，而只在CSS中使用:

.caption {
font-style: italic;
}

也許那會解決你的問題。