web-dev-qa-db-fra.com

Comment centrer l'icône d'ion à l'intérieur du 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é ce 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 affiche de cette façon:

enter image description here

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

Merci pour votre temps.

htmlcssionic-framework
10
user4227915

Vous pouvez soit définir text-align à center et line-height à 50% ou essayez ceci:

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

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

17
Tomek Buszewski