Как вертикально центрировать текст внутри тега?

Question

[Андрей]

В общем, есть вот такой элемент:

Есть такая проблема:

Как можно увидеть, текст не идеально центрирован, что на деле режет глаз. Какие стили надо писать для них?
Вот код:

HTML

<nav className="navigation">
    <ul className="navigation__list">
        <li className="navigation__list_item navigation__list_item--active">First fitting</li>
        <li className="navigation__list_item">Second fitting</li>
        <li className="navigation__list_item">Third fitting</li>
        <li className="navigation__list_item">Fourth fitting</li>
        <li className="navigation__list_item">Fifth fitting</li>
        <li className="navigation__list_item">Sixth fitting</li>
        <li className="navigation__list_item">Seventh fitting</li>
    </ul>
</nav>

CSS

.sales__fitting-content .navigation {
  display: flex;
  justify-content: center;
  margin: 0 !important;
}
.sales__fitting-content .navigation__list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--black);
}
.sales__fitting-content .navigation__list_item {
  display: flex;
  white-space: nowrap;
  padding: 2px 40px;
  vertical-align: middle;
  background-color: transparent;
  text-transform: uppercase;
  font-size: calc(9px + 0.25vw);
  line-height: calc(10px + 0.25vw);
  font-family: var(--main-font-medium);
  cursor: pointer;
}

Comments

[Gortyser]

В таком виде код довольно бесполезен. Нужны стили.

[Андрей]

Gortyser, добавил

[Gortyser]

https://codepen.io/Gortyser/pen/RjWRWp
Вроде все ок, line-height: 1 работает вообще-то.

[Андрей]

Gortyser, присмотрись к низу строки. Там 1-2 пикселя лишнего места всё еще присутствуют :(

[Ankhena]

Андрей, на примере моего браузера и кода из примера выше

Общая высота строки 19px, размер букв 10, границы по 1px. Остается 7. Ну а дальше браузер делит 7 на 2 как умеет.. Отсюда визуальные кривости.

Answer 1

[Кирилл]

.navigation__list_item {
  line-height: 1;
}

Comments

[Андрей]

Помогло!

[Rabbit Run]

Основа высота блока

Answer 2

[Максим]

https://codepen.io/MaximLensky/pen/XzmKWw?editors=1100 так ?

Comments

[Андрей]

Увы, нет