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格式设置上下文中删除文本。您可以通过将文本包装在另一个元素中，使该元素成为弹性项目来实现。现在，您的文本又回到了标准的 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容器的所有子代都是块级元素。因此，您在处理内联级元素的想法是错误的。 flex容器中没有内联级元素。

§ 4. Flex Items

弹性项目的display值被阻塞。如果指定   产生弹性的元素的流入子项中的display   容器是一个内联级别的值，它计算到其块级别   等效。

更多详细信息：

How to vertically align text inside a flexbox?

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

这应该可以解决问题！

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 4

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

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

4 个答案: