如何在选择元素的高度中间对齐字体真棒图标?如何在选择元素的高度中间对齐字体真棒图标?
<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/
如何在选择元素的高度中间对齐字体真棒图标?如何在选择元素的高度中间对齐字体真棒图标?
<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/
版本1: 您可以轻松地做到这一点使用Flexbox的用最少的代码。使用下面的CSS:
div {
display: flex;
align-items: center;
}
2版 添加以下CSS:
div {
display: table;
position: absolute
}
a {
display: table-cell;
vertical-align: middle;
}
非Flexbox的解决方案:
div {display: table}
a {display: table-cell; vertical-align: middle;}
div {
text-align: center;
vertical-align: middle;
}
Flexbox https://jsfiddle.net/gq2mfzuk/1/ –
试试这个https://jsfiddle.net/gq2mfzuk/2/ –
为什么你们不提交正式答案? :p – Aziz