Question

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

如何使文本垂直居中？

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

Answer 2

设置：

vertical-align:middle;
line-height:80px; //height of your parent element

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Label Button</label>
<a href="#" class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Link Button</a>
<button class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Actual Button</button>

在引导程序样式的标签和链接中垂直对齐文本

2 个答案: