Yazı tipi ile hizalama yazı tipi ile harika simgesi

Question

Aşağıdaki resim için, bunlar aynı satırda ayarlanmış, ancak altta değil, simgeyle ortalanmış olan metne ihtiyacım var. Burada neyi yanlış yapıyorum?

Kodum: div içindeki i elemana

<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

kullanın vertical-align:middle;.

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

deneyin görüntü: sıralı blok; ve dikey hizalama: orta; Düğmenizdeki

Answer 3

Metnin satır yüksekliğini ayarlayın.