引导链接不垂直居中，但按钮确实居中

Question

我想要一个<a></a>，文本在垂直方向居中，就像按钮一样。有人可以解释为什么<button></button>垂直居中，而不是链接吗？

行高不起作用（见下文）

.btn {
  height: 70px;
}

.line-height-example {
   line-height: 30px;
   min-height: 45px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="btn btn-primary">Not centered</a>
<button class="btn btn-primary">Centered</button>
<br><br>

<div class="row">
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height</a>
  </div>
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height example</a>
  </div>
</div>

Answer 1

您可以对文本使用padding属性。

.btn {
  height: 70px;
}

.line-height-example {
   line-height: 30px;
   min-height: 45px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="btn btn-primary" style="padding: 20px;">Not centered</a>
<button class="btn btn-primary">Centered</button>
<br><br>

<div class="row">
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height</a>
  </div>
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height example</a>
  </div>
</div>