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

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

您可以将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; } ，也可以尝试以下操作：

{{1}}

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