Bootstrap a link 没有垂直居中，但是按钮可以

Question

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

行高不起作用（见下文）

.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

.btn {
  height: 70px;
}

.line-height-example {
   line-height: 30px;
   min-height: 45px;
}
a {
 display:inline-flex !important;
 align-items:center !important;
}

<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>

Bootstrap a link 没有垂直居中，但是按钮可以

Bootstrap a link does not vertically center, but button does

css

button

vertical-alignment

twitter-bootstrap