html - 如何在选择元素的高度中间对齐 Font Awesome 图标？

Question

如何在选择元素的高度中间对齐 Font Awesome 图标？

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