Выровнять значение кнопки вертикально по центру

Question

У меня есть кнопка со значением, установленным на «*».

<button class="testButton" value="*">*</button>

Мне нужно выровнять ее значение по центру по вертикали.

Я пробовал следующее, но неработает:

.testButton {
  display: inline-flex;
  align-items: center; 
}

Заполнение работает, но я думаю, что это не лучшая практика.

Я уже рассмотрел другие вопросы, без подсказки.

Answer 1

Это по центру.Проблема происходит от символа звездочки.Используйте что-то еще, кроме "*".Например, у вас будет та же проблема с «∗».

button {
  font: monospace;
  height: 100px;
}

<button type="button">*</button>
<button type="button">∗</button>
<button type="button">★</button>

Answer 2

На самом деле, ваше "*" уже централизовано.Этот персонаж, в частности, немного выше, чем другие персонажи.Это также зависит от font-family.Вы можете доказать это, добавив на него обычный текст.Вы можете добавить padding-top, чтобы исправить эту визуальную деталь.Также я указываю, что вы добавили немного height к кнопке, чтобы улучшить ее внешний вид.