[英]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.