将字体真棒图标与文本对齐
Lining up font awesome icon with text
根据下图,这些设置在同一行,但我需要以图标为中心的文本,而不是底部。我在这里做错了什么?
我的代码:
<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>
在 div 内的 i
元素上使用 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>
尝试display:inline-阻止;和垂直对齐:中间;在你的按钮中
调整文字的行高。
根据下图,这些设置在同一行,但我需要以图标为中心的文本,而不是底部。我在这里做错了什么?
我的代码:
<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>
在 div 内的 i
元素上使用 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>
尝试display:inline-阻止;和垂直对齐:中间;在你的按钮中
调整文字的行高。