Как вертикально выравнивать текст, когда шрифт вычисляет высоту по-другому?

Question

Прошу прощения заблаговременно, если это дубликат, но я не могу найти ответ.

Я сделал что-то похожее на индикатор выполнения. Это div с p элементами внутри. Однако я не могу центрировать p элементов по вертикали.

Все, что я сделал сейчас, это дать родительскому div некоторому дополнению и логически текст должен быть посередине, но кажется, что шрифт подсчитывает высоту по-разному. И поэтому решение по изменению высоты линии не будет работать. Если я изменю шрифт на Verdana, текст будет выровнен, но это не является предпочтительным решением.

Отрывок:

div { 
 
    width: 90%; 
 
    background-color: green; 
 
    text-align: left; 
 
    padding: 1.2%; 
 
    border-radius: 5px; 
 
    height: 20px; 
 
    font-family: 'Hind Guntur', sans-serif; 
 
} 
 

 
p { 
 
    font-size: 90%; 
 
    display: inline; 
 
    margin: 0; 
 
    color: white; 
 
    }

<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> 
 
<div> 
 
    <p>1</p> 
 
</div>

Answer 1

Это должно быть то, что вы ищете. Ваша проблема заключалась в том, что у вас был фиксированный height от 20px на div. Если вы измените это значение на 28px, ваш текст может быть выровнен по вертикали.

div { 
 
    width: 90%; 
 
    background-color: green; 
 
    text-align: left; 
 
    padding: 1.2%; 
 
    border-radius: 5px; 
 
    height: 28px; 
 
    font-family: 'Hind Guntur', sans-serif; 
 
} 
 
p { 
 
    font-size: 90%; 
 
    display: inline; 
 
    margin: 0; 
 
    color: white; 
 
}

<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> 
 
<div> 
 
    <p>1</p> 
 
</div>

Answer 2

проверить это

div { 
 
    width: 90%; 
 
    background-color: green; 
 
    text-align: left; 
 
    padding: 1.2%; 
 
    border-radius: 5px; 
 
    height: 20px; 
 
    font-family: 'Hind Guntur', sans-serif; 
 
} 
 

 
p { 
 
    font-size: 90%; 
 
    display: inline; 
 
    margin: 0; 
 
    color: white; 
 
    vertical-align: middle; 
 
    }

<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> 
 
<div> 
 
    <p>1</p> 
 
</div>