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

Question

我正在寻找垂直对齐列表项中的文本。我正在使用display: flex; 和align-items: center;。但是我的代码包含一个strong 标记，它被解释为一个单独的弹性项目，因此两边的空格都被折叠了。

我可以用  破解它，但是有没有一种正确的方法让我的文本和内联元素垂直居中对齐？

• 我知道我可以将文本包装在<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

这应该可以解决问题！

li {
  display: flex;
  align-items: center;
  height: 8em;/* just for example */
  border: 2px solid red;/* just for example */
}
span {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

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

Answer 2

您可以考虑使用 CSS 网格并伪造边框。您将在视觉上获得预期的结果：

li {
  list-style:none;
  text-align:center;
}
ul {
  display:grid;
  grid-auto-rows:8em;
  grid-gap:2px;
  align-items:center;
  border: 2px solid red;
  background:linear-gradient(red,red) center/100% 2px no-repeat;
  padding:0;
  margin:0;
}

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

更多项目可以调整背景：

li {
  list-style:none;
  text-align:center;
}
ul {
  display:grid;
  grid-auto-rows:8em;
  grid-gap:2px;
  align-items:center;
  border: 2px solid red;
  background: repeating-linear-gradient(transparent 0 8em,red 8em calc(8em + 2px));
  padding:0;
  margin:0;
}

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

Answer 3

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

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 容器的所有子元素都是块级元素，无论您指定什么。因此，您处理内联级元素的想法是不正确的。弹性容器中没有内联元素。

§ 4. Flex Items

弹性项目的display 值被阻止。如果指定 display 一个元素的流入子元素生成一个 flex container 是一个内联级别的值，它计算到它的块级别 等价的。

更多细节：

• How to vertically align text inside a flexbox?

Answer 4

在这种情况下，我建议使用display: contents 和@supports() 的回退，使用边距或内容为1 个空格的伪元素。