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

【问题标题】：How to center align ion icon inside button?如何在按钮内居中对齐离子图标？
【发布时间】：2016-02-10 02:13:30
【问题描述】：

我有这个 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 设置到按钮的中心？

感谢您的宝贵时间。

【问题讨论】：

一方面，您可以将.circle 的line-height 设置为50px。
尝试将position: relative; 添加到.circle
@Aaron。它没有用..我认为 ionic 对卡使用默认的flex 样式。我不知道如何解决它。
@TomekBuszewski。它在.circle i 工作，现在图标居中对齐，谢谢:)
请注意，如果您不设置图标高度，此解决方案可能无法在 Internet Explorer 中运行。

标签： html css ionic-framework

【解决方案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/

【讨论】：

项目到了中心，但是card还是有高度问题。
也许您也应该修改card 代码（height 等）。