css - 垂直对齐div内的输入+字体图标？

Question

我正在尝试垂直对齐 div 中的输入字体图标。图标略大于输入，因此未对齐。我试过垂直对齐，但没用。

<div>
      <input type="text" class="email-address" 
            value="long-long-long-user@test-test-test.com"> 
             <i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>

我知道这可以使用 flex box 来完成，但想知道我是否可以在不将 display:flex 分配给外部 div 的情况下做到这一点。

Answer 1

如果输入 + 图标的高度固定。也许简单地尝试在图标顶部留出少量负边距，或者尝试对齐两个元素:

display: inline-block;
vertical-align: middle;

如果你想要简单的东西:

https://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp