Bootstrap：垂直对齐段落文本和按钮

Answer 1

使用与

.btn

相同的样式可能是一个好方法。 示例 已禁用

.btn

<p>
    <a class="btn btn-default" href="#">Take exam</a> 
    <span class="text-muted btn" disabled="true">Text</span>
</p>

---

或者创建一个具有相同属性的

.btn-align

类。 示例

CSS

.btn-align {
    padding: 6px 12px;
    line-height: 1.42857143;
    vertical-align: middle;

}

HTML

<p>
  <a class="btn btn-default" href="#">Take exam</a> 
  <span class="text-muted btn-align">Available after reading course material</span>
</p>

Answer 2

在 Bootstrap 4 中，如果您不想为其创建特殊的 CSS 类，您可以使用实用程序来设置

display: inline-block

和

vertical-align: middle

来执行此操作。

<p>
    <a class="btn btn-outline-secondary" href="#">Take exam</a> 
    <span class="text-muted d-inline-block align-middle">Available after reading course material</span>
</p>

示例

Answer 3

要调整按钮的垂直位置以匹配相邻文本，同时保留该文本的位置不变，您可以将适当命名的

align-baseline

类添加到按钮：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<p>
  <a class="btn btn-default align-baseline" href="#">Take exam</a> 
  <span class="text-muted">Available after reading course material</span>
</p>