html - 按钮上的 Font-Awesome 图标不会垂直对齐

Question

所以我有这个带有一些按钮的应用程序，上面有一些 Font Awesome 图标。这些按钮放置在 Bootcards header 内。

<button class="btn btn-primary pull-right ">  
    <i class="fa fa-pencil" ></i>
</button>

现在的问题是它看起来像这样:

然后我还有另一张带有文字的，看起来也不正确:

这个具有以下 HTML:

<button class="btn btn-success" onclick="publishMessage()">
    <i class="fa fa-check"></i>
    Publiser
</button>

现在，经过一番谷歌搜索后，我发现 vertical-align 应该可以帮助我，但它根本没有任何作用。我发现的所有方法都只是在图标周围创建填充或边距，以便它仍然接触按钮的底部，但在更大的按钮上。

由于我对这种语言不太熟悉，我想知道为什么只添加一些 CSS，如 .fa {vertical-align: middle;} (或使用我自己的类名)不起作用，以及我需要做什么。

更新:这是 JSFiddle 。

Answer 1

解决办法很简单。你应该改变

<i class="fa fa-check"></i>

由

<span class="fa fa-check"></span>

然后只需使跨度高度等于他的容器即可。 并利用垂直对齐属性。 跨度的 CSS

height: inherit;
vertical-align: inherit;

更新: http://jsfiddle.net/uz3tu23s/4/