垂直居中按钮文本，其下方具有比其上方更多的固有空间

Question

我的按钮，定义为<a href='#' class='button'>Click</a>，并且设置为.button { background: red; padding: 20px; }，不是垂直居中的，因为我使用的字体在其下方具有比其上方更多的固有空间。有没有办法在不改变标记的情况下使其居中，如果不是，那么最佳选择是什么？

编辑：使用line-height代替填充适用于默认字体，而不是使用我正在使用的字体。

（按钮周围的灰色是我的页面背景而不是边框​​）

Answer 1

使用line-height。这将设置文本的高度并垂直提供不可见的相等填充。注意，这个技巧只适用于块元素。因此，如果您想在a标记上使用它，则需要将其转换为块元素（使用display: block）

a.button {
  background: red;
  color: white;
  text-align: center;
  width:100px;

  /* The magical lines */
  line-height: 3em;
  display: block;
}

<a class="button">Text</a>

这对于元素中的单行文本来说是理想的 - 而不是多行元素。

Answer 2

使用line-height属性而不是填充垂直居中对齐