How to center the needle icon inside the button?

Question

I have this html structure:

<ion-view view-title="Items"> <ion-content> <div class="card"> <a href="#/app/item1" class="item item-text-wrap item-button-left"> <button class="button circle text-center"> <i class="ion-crop"></i> </button> Item 1 </a> </div> <div class="card"> <a href="#/app/item2" class="item item-text-wrap item-button-left"> <button class="button circle text-center"> <i class="ion-social-buffer"></i> </button> Item 2 </a> </div> </ion-content> </ion-view> 

And I added this custom css:

 .circle { background-color: #00f; border-radius: 100%; border: 1px solid #00f; width: 50px!important; height: 50px; color: #fff; } .circle i { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } 

But it is displayed as follows:

How can I make cards for the correct height and ion-icons to the center of the button?

Thank you for your time.

Answer 1

You can set text-align to center and line-height to 50% or try the following:

 .circle { background: blue; width: 50px; height: 50px; position: relative; border-radius: 100%; } .icon { position: absolute; top: 50%; left: 50%; height: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; display: block; background: red; } 

Fiddle: http://jsfiddle.net/41eo0he7/