span 标签内的垂直居中文本

Posted 2023-03-05

【中文标题】span 标签内的垂直居中文本

【英文标题】：Vertical center text inside span tag

【发布时间】：2020-08-12 07:46:20

【问题描述】：

我的问题是我无法集中 span 标签内的文本。我的 CSS 如下：

span 
    display: inline-flex;
    align-items: center;

或

span 
    display: inline;
    vertical-align: middle;

文本底部和 span 标签底部之间存在间隙。

请看图

【问题讨论】：

请注意您的图像中只有大写字母。考虑jqp 字母，看看区别

【参考方案1】：

使用 line-height 属性来实现居中对齐。将其值设置为与 height 属性相同的值。此外，将边距和填充设置为 0，这样就不会有可能导致间隙的默认边距

.middleText 
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #85D389;
    padding:0;
    margin:0;