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

我希望在列表项中垂直对齐文本。我正在使用

display:flex和
对齐项目：居中。但是我的代码包含一个
strong
标记，该标记被解释为一个单独的弹性项，因此两边的空格都会被折叠

我可以用
来破解它，但是有没有合适的方法让我的文本和内联元素垂直对齐中心


我知道我可以用
来包装文本。我尽量避免这样
我的文本可能足够长，可以换行，因此
行高
不是一个选项
一旦得到广泛支持，这将是我的解决方案


li{
显示器：flex；
对齐项目：居中；
高度：8em；/*仅举个例子*/
边框：2px纯红；/*仅为示例*/
}

这篇文章垂直居中是非常重要的
同样文本中有空格也非常重要

这应该可以解决问题


li{
显示器：flex；
对齐项目：居中；
高度：8em；/*仅举个例子*/
边框：2px纯红；/*仅为示例*/
}
跨度{
位置：相对位置；
左：50%；
转化：translateX（-50%）；
}

这篇文章垂直居中是非常重要的
同样文本中有空格也非常重要

在这种情况下，我建议使用
display:contents
和带有
@supports（）的fallback（）
使用边距或包含1个空格内容的伪元素
 解决问题的唯一有效方法是从flex格式上下文中删除文本。可以通过将文本包装到另一个元素中，使该元素成为flex项来实现这一点。现在，文本回到了标准块格式上下文中，折叠空格不再是问题


li{
显示器：flex；
对齐项目：居中；
高度：8em；
边框：2倍纯红；
}


这篇文章垂直居中是非常重要的



同样文本中有空格也非常重要


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

li{
列表样式：无；
文本对齐：居中；
}
保险商实验室{
显示：网格；
网格自动行：8em；
网格间距：2px；
对齐项目：居中；
边框：2倍纯红；
背景：线性梯度（红色，红色）中心/100%2px无重复；
填充：0；
保证金：0；
}

此
文本垂直居中是非常重要的
同样文本中有空格也非常重要

我知道我可以将文本包装成。我正试图避免这种情况。
-->您应该这样做，并且永远不要将文本容器变成flexbox容器，如果您有更多的行，您所拥有的与您将拥有的相比将一文不值。相关报道：他说不想把整件事都包起来