bootstrap图标与文字无法对齐

img

img


刚开始学bootstrap，我的标和文字总是有一点对不齐，这个有人知道吗

该回答引用ChatGPT

可以通过调整CSS样式来解决这个问题。具体来说，你可以调整文本的垂直对齐方式，以使其与图标对齐。这可以通过设置行高（line-height）属性来实现。以下是一个简单的例子：


<div class="panel panel-default">
  <div class="panel-heading">
    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
    <span class="panel-title" style="line-height: 20px; vertical-align: middle;">信息记录</span>
  </div>
</div>

在这个例子中，我们为标题文本设置了一个行高，以使其垂直居中对齐。你可以通过调整行高的值来调整垂直对齐方式。另外，我们还设置了一个垂直对齐属性，以确保图标和文本在垂直方向上对齐。

把图标的span改成嵌套元素，并设置vertical-align居中，亲测可行，如下：


<div class="panel panel-default">
    <div class="panel-heading">
        <span aria-hidden="true" style="vertical-align: middle;">
            <span class="glyphicon glyphicon-th-list"></span>
        </span>
        信息记录
    </div>
</div>

结果如图：

img