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

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