在按鈕標籤

Question

移動元素我有這樣一段代碼：

<div style="float: right">  
<button type="button" class="btn btn-link colorGrey " ng-click="ViewFactory.ShowView('WelcomepageModule')" ng-show="({IsActive: true, IsVisible: true, IsMandatory: true}).IsVisible" ng-disabled="!({IsActive: true, IsVisible: true, IsMandatory: true}).IsActive" ng-required="({IsActive: true, IsVisible: true, IsMandatory: true}).IsMandatory" required="required" style="font-size: 1.5em;">  
     <span class="fa fa-times" style="margin-right: 2px"></span> Close         
</button> 
</div> 

我想與單詞「關閉」的中心對齊字體真棒圖像。 我該怎麼辦？

Answer 1

你的代碼的簡化版本。請嘗試使用以下語法的概念。

HTML

<button type="button" class="btn btn-link colorGrey ne-cls"> 
<span class="fa fa-times icn-cls" style="margin-right: 2px; "></span> <span class="txt">Close</span> 
</button> 

CSS

.ne-cls {diplay:inline-block;} 
.icn-cls{vertical-align:middle;} 
.txt {vertical-align:middle;} 

Answer 2

不確定圖標是否對齊頂部，或者您想要頂部的圖標。所以，這裏都是。

您可以使按鈕的內容爲塊並使用下面的CSS。

<div style="float: right"> 
    <button type="button" class="btn btn-link colorGrey" style="font-size: 1.5em;"> 
    <span class="fa fa-times" style="margin-right: 2px"></span> 
    <span>Close</span> 
    </button> 
</div> 

button > * { 
    display: block; 
    text-align: center; 
} 

JSFiddle

或

button > * { 
    display: inline-block; 
    vertical-align: top; 
} 

JSFiddle