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

通常，當(dāng)我想讓一個(gè)元素將文本垂直居中時(shí)，我只需將它轉(zhuǎn)換成一個(gè)flex容器并align-items:center；。唉，問(wèn)題來(lái)了。

我展示的是來(lái)自大自然的圖片，通用名和學(xué)名都包含在& lt圖標(biāo)題& gt。標(biāo)準(zhǔn)做法是將學(xué)名斜體。當(dāng)我把& lt我& gt在部分文本中，flex將文本轉(zhuǎn)換成三個(gè)不同的框:前斜體文本、斜體文本和后斜體文本。然后，如果文本溢出了它的容器，它會(huì)在每個(gè)框中換行。

所以這個(gè):

<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

以下是當(dāng)前相關(guān)代碼的快照:

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

我已經(jīng)找到了一個(gè)潛在的解決方案，盡管我不確定這是否符合WCAG無(wú)障礙指南?；? lt上的MDN文檔圖標(biāo)題& gt我可以在其中包含其他HTML元素，只要它們是流類(lèi)型的元素。div & gts是。

所以我能做的就是插入一個(gè)& ltdiv & gt在& lt圖標(biāo)題& gt既要實(shí)現(xiàn)垂直居中的目標(biāo)，又要避免內(nèi)容分成那三個(gè)討厭的列的陷阱?？雌饋?lái)是這樣的:

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

并使用我最初提交的代碼來(lái)演示它的預(yù)期行為:

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

也許那會(huì)解決你的問(wèn)題。