如何使ion图标在按钮内居中对齐？

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 居中在按钮上？

感谢您的时间。

- user4227915

---

首先，您可以将 .circle 的 line-height 设置为 50px。 - Tomek Buszewski

尝试在.circle中添加position: relative;。 - Aaron

@Aaron。它没有起作用...我认为Ionic使用默认的flex样式来处理卡片。我不知道如何解决它。 - user4227915

@TomekBuszewski。现在在.circle i中运行，图标已经居中对齐，谢谢 :) - user4227915

请注意，如果您不设置图标高度，此解决方案可能无法在Internet Explorer中正常工作。 - Tomek Buszewski

我正在使用Ionic..它将在Android和iOS上显示...仅适用于Webkit平台。 - user4227915

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

Fiddle：http://jsfiddle.net/41eo0he7/

- Tomek Buszewski

---

该项目已居中，但“card”仍存在高度问题。 - user4227915

也许你应该同时修改 card 代码（例如 height）. - Tomek Buszewski