[英]How to vertical align icon inside label and button in the same way
我正在尝试将ul / li标签内的图标垂直居中。 取决于是否将图标放置在按钮标签和标签标签中,我得到两个不同的结果,而标签无法正常工作。
<ul>
<li><label class="btn"><i class="fa fa-anchor"></i></label></li>
<li><button class="btn"><i class="fa fa-anchor"></i></button></li>
<li><button class="btn"><i class="fa fa-anchor"></i></button></li>
</ul>
CSS:
li{
display: inline-block;
text-align: center;
vertical-align: middle;
box-sizing: border-box;
margin: 0;
border: 1px solid;
}
button,
label{
position: relative;
cursor: pointer;
padding: 0;
margin: 0;
background: transparent;
color: inherit;
font-size: 16px;
border: none;
outline: none;
width: 41px;
height: 41px;
padding: 0 5px;
margin: 0 2px;
text-align: center;
display: inline-block;
box-sizing: border-box;
}
button:hover,
label:hover{
background-color: #4E84BB;
color: white;
}
请参阅小提琴: http : //jsfiddle.net/zbhjco0j/
如何在两种情况下将图标居中?
谢谢
添加line-height: 41px;
button, label
演示
CSS:
button,
label{
position: relative;
cursor: pointer;
padding: 0;
margin: 0;
background: transparent;
color: inherit;
font-size: 16px;
border: none;
outline: none;
width: 41px;
height: 41px;
line-height: 41px; /* newly added */
padding: 0 5px;
margin: 0 2px;
text-align: center;
display: inline-block;
box-sizing: border-box;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.