CODEWITHSUNDEEP
htmlcssbuttonweb
boris
boris

Reputation: 353

Move element in a button tag

I have this piece of code:

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

I want to align the font awesome image with the center of the word "Close". How can I do it ?

Upvotes: 1

Views: 629

Answers (2)

Fazil Abdulkhadar
Fazil Abdulkhadar

Reputation: 1101

A simple version of your code. Please try with the concept of the following syntax.

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

Upvotes: 1

Aakash
Aakash

Reputation: 1791

Not sure if you want the icon to align to the top or you want the icon on top. So, here's both.

You can make the contents of the button as block and use the below 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

or

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

JSFiddle

Upvotes: 0

Related Questions