span标记内的垂直居中文字

Question

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

span {
display: inline-flex;
align-items: center;
}
or
span {
display: inline;
vertical-align: middle;
}

文本的底部和span标签的底部之间有间隙。请看图片here

Answer 1

使用line-height属性以实现与中间对齐。将其值设置为与height属性的值相同。

.middleText {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #85D389;
}