排队字体真棒图标与文本

Question

根据下图，这些设置在同一行，但我需要以图标为中心的文本，而不是在底部。我在这里做错了什么？

我的代码：

<div class="alertBtns">
    <button class="naviaBtn naviaBlue" ng-show="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)"><i class="fa fa-exclamation-circle fa-2x" ng-show="ppt.Swipes.length>0"></i>outstanding swipes</button>
    <button class="naviaBtn naviaBlue" ng-click="showAlerts();"><i class="fa fa-exclamation-circle fa-2x" ng-show="isNotRead"></i>recent denials</button>                    
    <button class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 4 ? -1 : 4)"><i class="fa fa-exclamation-circle fa-2x" ng-show="dateAlert"></i>upcoming dates</button>
</div>

Answer 1

在div内的vertical-align:middle;元素上使用i。

＆＃13;

＆＃13;

div.alertBtns i{
  vertical-align:middle;  
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="alertBtns">
    <button class="naviaBtn naviaBlue" ng-show="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)"><i class="fa fa-exclamation-circle fa-2x" ng-show="ppt.Swipes.length>0"></i>outstanding swipes</button>
    <button class="naviaBtn naviaBlue" ng-click="showAlerts();"><i class="fa fa-exclamation-circle fa-2x" ng-show="isNotRead"></i>recent denials</button>                    
    <button class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 4 ? -1 : 4)"><i class="fa fa-exclamation-circle fa-2x" ng-show="dateAlert"></i>upcoming dates</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试显示：inline-block;和vertical-align：middle;在你的按钮

Answer 3

调整文字的行高。