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

Question

我有一段带有按钮a元素的文字：

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

然而，这样呈现的结果是两者不垂直对齐的。

在这里对齐文本基线的最佳方法是什么？

请参见此处的演示

- William Entriken

---

这个在我看来比你的图片好看？http://www.bootply.com/gtl3JhtLi0 - Jordan.J.D

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>

- im_brian_d

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>

示例

- Aaron