在不指定高度的情况下垂直对齐跨度标签中的文本？ [复制]答案

【问题标题】：Vertically align text in a span tag without specifying height? [duplicate]在不指定高度的情况下垂直对齐跨度标签中的文本？ [复制]
【发布时间】：2020-08-03 12:30:58
【问题描述】：

这是一个类似的问题，答案要么包装另一个元素，要么指定高度： How do I vertically align something inside a span tag?

是否可以这样做：

        <span style="
                  background-color:linen;
                  font-size: 2rem; 
                  font-weight: 500; 
                  padding: 2rem;">
CENTER ME VERTICALLY
            </span>

让CENTER ME VERTICALLY 这样做而不指定高度。我可以让它与弹性盒和元素包装一起使用，但我想知道是否有更简单更优雅的方法来做到这一点？

【问题讨论】：

垂直居中基于什么？你的文字定义了跨度的高度，所以它已经垂直对齐了
默认值为 line-height: normal。你可以改变它。如果您不想指定高度，这是唯一可以指定的。
我很困惑。如果您的显示设置为 inline-block，那么您为什么接受将其设置为 inline-block 的答案？
您没有添加问题的答案。一个问题需要保持一个问题
您的问题也不是居中问题，而是内联元素上的填充不会影响布局这一事实。向 body 元素添加填充以注意这一点：jsfiddle.net/gq9s6wcm

标签： html css flexbox

【解决方案1】：

我希望这能回答你的问题。

您正在使用 span 内联显示。如果要使用span，请尝试添加display: inline-block

【讨论】：