Rod Rod - 4 months ago 11
CSS Question

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

How do I align font awesome icon in the 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/

Answer

Version 1: You can easily do this using flexbox with minimum code. Use the following CSS:

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

Version 2 Add the following CSS:

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