在中间垂直对齐按钮值

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到该按钮，以提高它的外观。