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

Question

我在带有按钮a元素的段落中有文字：

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

但是，这会使两者不垂直对齐。

在此处对齐文字基线的最佳方法是什么？

在http://jsfiddle.net/0j20stbh/

处小提琴

Answer 1

使用与.btn相同的样式可能是一个很好的方法。已禁用.btn

的 Example

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

<小时/> 或者创建具有相同属性的.btn-align类。 Example

<强> 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中，您可以使用实用程序来设置display: inline-block和vertical-align: middle，以防您不想为其创建特殊的CSS类。

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

Example