html - How do I align font awesome icon in the middle of select element's height? -

how align font awesome icon in middle of select element's height?

<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/

version 1: can using flexbox minimum code. use following css:

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

version 2 add following css:

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