Html 如何在按钮内居中对齐离子图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33609020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center align ion icon inside button?
提问by Tomek Buszewski
I have this html structure:
我有这个 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>
And I've added this custom css:
我添加了这个自定义 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;
}
But it displays this way:
但它以这种方式显示：
How can I do the cardsto take the correct height and the ion-iconsto the button's center?
我怎样才能cards采取正确的高度和ion-icons按钮的中心？
Thanks for your time.
谢谢你的时间。
回答by Tomek Buszewski
You can either set text-alignto centerand line-heightto 50%or try this:
您可以设置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/
