Переместить элемент в кнопку тега

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