web-dev-qa-db-ja.com

ボタン内のイオンアイコンを中央に揃える方法は？

私はこの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;
}

ただし、次のように表示されます。

enter image description here

cardsを実行して正しい高さとion-iconsボタンの中心へ？

御時間ありがとうございます。

htmlcssionic-framework
10
user4227915

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/

17
Tomek Buszewski