如何在 select 元素高度的中间对齐字体真棒图标？

Question

如何在 select 元素的高度中间对齐超棒的字体图标？

<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;
}