Comment faire pour centrer aligner ion icône de l'intérieur de bouton?

J'ai cette structure 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>

Et j'ai ajouté cette css personnalisé:

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

Mais il s'affiche de cette façon:

Comment faire pour centrer aligner ion icône de l'intérieur de bouton?

Comment puis-je faire la cards de prendre de la hauteur et la ion-icons pour le bouton du centre?

Merci pour votre temps.

Pour un, vous pouvez définir line-height de .circle à 50px.
essayez d'ajouter position: relative; à la .circle
Il ne fonctionne pas.. je pense ionique utilise une valeur par défaut flex style à la carte. Je ne sais pas comment le contourner.
Il a travaillé dans .circle i, maintenant l'icône est le centre alignés, merci 🙂
Notez bien que cette solution ne fonctionne pas dans Internet Explorer si vous ne définissez pas l'icône de hauteur.

OriginalL'auteur | 2015-11-09