如何在按钮内居中对齐离子图标？

Question

我有这个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>

我添加了这个自定义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;
}

但它以这种方式显示：

如何才能将cards设置为正确的高度，将ion-icons到按钮的中心？

谢谢你的时间。

Answer 1

您可以将text-align设置为center和line-height为50%或尝试：

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

小提琴： http ： //jsfiddle.net/41eo0he7/