Jak wyśrodkować ikonę jonu wewnątrz przycisku?

Question

mam tej struktury HTML:

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

I dodałem ten niestandardowy 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; 
} 

Ale to pokazuje w ten sposób:

Jak mogę zrobić cards, aby uzyskać właściwą wysokość, a ion-icons do środka przycisku?

Dzięki za poświęcony czas.

Answer 1

Można też ustawić text-align do center i line-height do 50% lub spróbuj tego:

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