Как вертикально отцентрировать текст с помощью CSS

Question

Как вы можете видеть на изображении ниже, текст имеет пробел внизу, но не выше, что приводит к вертикальному центру текста.Что может быть причиной этого и как я могу расположить текст по центру по вертикали?

Текст без центрирования по вертикали:

Стиль Computed CSSтекста:

background-color: rgb(255, 0, 0) ; 
color: rgb(255, 255, 255) ; 
cursor: pointer ; 
display: inline-block ; 
font-family: adiNeue ; 
font-size: 17px ; 
height: 17px ; 
letter-spacing: 1px ; 
line-height: 17px ; 
margin-bottom: 0px ; 
margin-left: 0px ; 
margin-right: 0px ; 
margin-top: 0px ; 
padding-bottom: 0px ; 
padding-left: 0px ; 
padding-right: 0px ; 
padding-top: 0px ; 
text-align: center ; 
text-transform: uppercase ; 
width: 66.4375px ;

---

РЕДАКТИРОВАТЬ: Оказывается, что все элементы на странице имеют одинаковую проблему.Вы знаете, что может быть причиной этого?

Answer 1

Как сказал Тедж, Паддинг делает то, что вы хотите.Вы можете упростить свой код для целей тестирования до чего-то подобного, чтобы увидеть эффект заполнения:

background-color: rgb(255, 0, 0);
color: rgb(255, 255, 255);
text-align: center;
text-transform: uppercase;
width: 66.4375px;
padding: 5px;

Answer 2

Оказывается, что лишний пробел под текстом зарезервирован для спусков текста (то есть части буквы g, которая идет ниже линии).

Единственныйспособ заставить этот текст выглядеть по центру на всех экранах - использовать JavaScript, поскольку вы не можете заранее знать точную высоту зарезервированного пространства.

Answer 3

Попробуйте изменить свойство padding, например так:

span {
  background-color: rgb(255, 0, 0) ; 
color: rgb(255, 255, 255) ; 
cursor: pointer ; 
display: inline-block ; 
font-family: adiNeue ; 
font-size: 17px ; 
height: 17px ; 
letter-spacing: 1px ; 
line-height: 17px ; 
margin: 0px ;  
padding: 12px ;  
text-align: center ; 
text-transform: uppercase ; 
width: 66.4375px ;
}