Css 引导：垂直对齐段落文本和按钮

我的段落中有一个按钮

a

元素：

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

阅读课程材料后可用

但是，这会渲染两个未垂直对齐的对象

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

---

使用与

.btn

相同的样式在上拨弄可能是一个好方法禁用

.btn

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

HTML

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

阅读课程材料后可用

在Bootstrap 4中，如果不想为其创建特殊的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>

阅读课程材料后可用

---

这比你的照片好看吗？

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