html - 垂直对齐 Bootstrap 样式标签和链接中的文本

Question

我尝试使用 bootstrap 按钮样式的标签和链接，其高度高于默认值，并且文本在按钮的上侧垂直对齐。如果我对实际的按钮元素执行相同操作，它会垂直居中。

如何让文本垂直居中？

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

<label class="btn btn-primary" style="height: 80px; margin-bottom: 0">Label Button</label>
<a href="#" class="btn btn-primary" style="height: 80px; margin-bottom: 0">Link Button</a>
<button class="btn btn-primary" style="height: 80px">Actual Button</button>

Answer 1

只需将这一行添加到按钮的类中:

line-height: 60px;

或者你可以这样做:

display: inline-flex;
align-items: center;

如以下片段所示。

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

<label class="btn btn-primary" style=" display: inline-flex;
  align-items: center;
     height: 80px; margin-bottom: 0">Label Button</label>
<a href="#" class="btn btn-primary" style="line-height: 60px; height: 80px; margin-bottom: 0">Link Button</a>
<button class="btn btn-primary" style="height: 80px">Actual Button</button>