Вертикальный центральный текст внутри тега span

Question

Моя проблема в том, что я не могу централизовать текст внутри тега span. Мой CSS как показано ниже:

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

или

span {
    display: inline;
    vertical-align: middle;
}

Между нижней частью текста и нижней частью тега span есть пробел.

Пожалуйста, смотрите изображение

Answer 1

Используйте свойство line-height для достижения выравнивания по середине. Установите его значение равным значению свойства height. Кроме того, установите margin и padding в 0, чтобы не было полей по умолчанию, которые могли бы вызвать разрыв

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