在中间垂直对齐按钮值

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>