html - 在 flex 布局中垂直居中包含内联元素的文本，同时保留空白

Question

我希望垂直对齐列表项中的文本。我正在使用 display: flex;和 align-items: center; .但是我的代码包含一个 strong标签，它被解释为一个单独的 flex 元素，因此两侧的空间被折叠。

我可以用   破解它，但是是否有正确的方法让我的带有内联元素的文本垂直居中？

• 我知道我可以将文本包装在 <p> 中.我正在努力避免这种情况。
• 我的文字可能足够长，所以 line-height不是一个选择。
• 一次display: contents;得到广泛支持，这将是我的首选解决方案。

li {
  display: flex;
  align-items: center;
  height: 8em;/* just for example */
  border: 2px solid red;/* just for example */
}

<ul>
  <li>It is <strong>Very important</strong> that this text is vertically centered!</li>
  <li>Also <strong>Very important</strong> that there are spaces in the text.</li>
</ul>

Answer 1

解决您的问题的唯一有效方法是从 flex 格式化上下文中删除文本。您可以通过将文本包装在另一个元素中来实现这一点，使该元素成为 flex 元素。现在您的文本回到了标准的 block 格式上下文，并且折叠空格不再是问题。

li {
  display: flex;
  align-items: center;
  height: 8em;
  border: 2px solid red;
}

<ul>
  <li>
    <p>It is <strong>Very important</strong> that this text is vertically centered!</p>
  </li>
  <li>
    <p>Also <strong>Very important</strong> that there are spaces in the text.</p>
  </li>
</ul>

另外，请注意，无论您指定什么， flex 容器的所有子元素都是 block 级元素。因此，您正在处理内联级元素的想法是不正确的。 flex 容器中没有内联级元素。

§ 4. Flex Items

The display value of a flex item is blockified. If the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

更多详情:

• How to vertically align text inside a flexbox?