Выровнять шрифт удивительный значок с текстом

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

vertical-align:middle; Использование на i элемента внутри от дел.

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

<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>

Answer 2

Try дисплей: встроенный блок; и выравнивание по вертикали: среднее; в вашей кнопке

Answer 3

Отрегулируйте высоту строки текста.