如何在選擇元素的高度中間對齊字體真棒圖標？

Question

如何在選擇元素的高度中間對齊字體真棒圖標？

<div style="vertical-align:middle"> 
    <select size="10"></select> 
    <a href="#"> 
     <i class="fa fa-times-circle" aria-hidden="true"></i> 
    </a> 
</div> 

https://jsfiddle.net/gq2mfzuk/

Answer 1

版本1： 您可以輕鬆地做到這一點使用Flexbox的用最少的代碼。使用下面的CSS：

div { 
    display: flex; 
    align-items: center; 
} 

2版 添加以下CSS：

div { 
    display: table; 
    position: absolute 
} 
a { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 2

非Flexbox的解決方案：

div {display: table} 
a {display: table-cell; vertical-align: middle;} 

https://jsfiddle.net/f48zgdpu/

Answer 3

div { 
text-align: center; 
vertical-align: middle; 
}