Question

我正在使用Bootstrap 3构建一个站点。我正在尝试正确对齐一些文本和图标。例如，我想展示以下内容：

[icon] 12 products

和

visit now [icon]

在第一个中，glyphicon显示在文本的左侧。在第二个中，glyphicon显示在文本的右侧。我的问题是，无论我做什么，文本都没有与图标垂直对齐。例如，使用以下HTML，标签显示比图标低几个像素。我希望文本垂直居中于图标，反之亦然。我只是不希望它看起来那么笨拙。

<ul class="list-inline pull-right">
  <li><span class="pull-right">visit now</span></li>
  <li style="padding-left:0px;"><i class="glyphicon glyphicon-circle-arrow-right"></i></li>
</ul>

我不确定如何解决此问题，以使文字正确对齐。

Answer 1

这很好用。 DEMO

<ul class="list-inline pull-right">
  <li><span>visit now</span><i class="glyphicon glyphicon-circle-arrow-right"></i></li>
</ul>

在Bootstrap 3中对齐文本和图标

1 个答案: