[英]How to center align ion icon inside button?
我有這個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
到按鈕的中心?
謝謝你的時間。
您可以將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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.