如何在含部分样式文本的figcaption中实现文字垂直居中？

核心思路 #

直接把<figcaption>设为flex容器时，它会将内部文本节点和<i>标签都识别为独立flex项目，导致文本被拆分、换行异常。解决关键是把所有文本内容包裹在一个块级子容器中，让flex布局仅作用于这个子容器，内部文本与斜体标签保持正常文档流排版。

实现代码 #

<figcaption class="fig-caption">
  <p class="caption-content">
    普通名称 <i>学名（斜体）</i> 额外说明文本，可能会换行成多行
  </p>
</figcaption>

.fig-caption {
  /* 自定义固定高度 */
  height: 80px;
  /* flex实现子容器的垂直+水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 基础样式：提升可读性 */
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 0 1rem;
  /* WCAG要求：键盘聚焦可见 */
  outline: 2px solid transparent;
  transition: outline 0.2s;
}

.fig-caption:focus-visible {
  outline-color: #4a90e2;
}

.caption-content {
  /* 文本水平居中 */
  text-align: center;
  /* 允许自动换行 */
  white-space: normal;
  /* 限制宽度避免单行过长 */
  max-width: 90%;
  /* 多行文本行高：符合WCAG可读性要求 */
  line-height: 1.4;
  /* 移除默认margin避免影响居中 */
  margin: 0;
}

方案优势 #

• <figcaption>作为flex容器仅负责子块的居中，不会拆分内部文本与<i>标签，排版完全正常。
• 子容器内的斜体标签仅作为文本样式存在，不会破坏多行文本的自动换行逻辑。
• 行高设为1.4既满足WCAG可读性标准，又避免了line-height等于容器高度导致的多行间距过大问题。

WCAG合规补充 #

• 确保<figcaption>在键盘聚焦时（focus-visible）有清晰轮廓，满足键盘导航可访问性。
• 文本与背景对比度需达到至少4.5:1（普通文本），符合WCAG 2.1 AA标准。
• 使用rem等相对单位，保证文本缩放至200%时不出现内容截断。

内容的提问来源于stack exchange，提问作者jafarlow