文本在行上未正确对齐

Question

请参阅以下示例：

    <div class="row">
      <div class="col-2">
        <p>Error</p>
      </div>
      <div class="col-8">
        <div class="progress error" data-toggle="tooltip" data-placement="bottom">
          <div class="progress-bar error-bar" role="progressbar"></div>
        </div>
      </div>
      <div class="col-2">
        <a tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="Some random text">
          <i class="fa fa-info-circle" aria-hidden="true" style="vertical-align: top"></i>
        </a>
      </div>
    </div>

文本“错误”未与prograss栏和字体真棒图标垂直对齐。我尝试将vertical-align: top添加到<p>，但它没有任何区别。如何正确垂直对齐文本？

Answer 1

您可以将line-height: 1rem;添加到<p>

Answer 2

尝试将课程align-items-center添加到row，这会使所有cols在行的中心垂直对齐。

如果您对Bootstrap网格系统有任何疑问，请查看the documentation，顺便说一句，这是非常好的。

属性vertical-align仅适用于内联和表格单元格元素，请查看the MDN documentation。因此，vertical-align仅在您的<p>元素是内联元素且具有足够高度才能对齐时才有效。