垂直对齐div内的输入+字体图标？答案

【问题标题】：Vertically align input + font icon inside div?垂直对齐div内的输入+字体图标？
【发布时间】：2018-05-14 18:09:08
【问题描述】：

我正在尝试垂直对齐 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 的情况下做到这一点。

【问题讨论】：

标签： css

【解决方案1】：

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

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

如果你想要一些简单的东西：

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

【讨论】：

【解决方案2】：

使用display: table-cell 作为替代：

快速而肮脏的例子：

.div {
    background-color: #F00;
    padding: 2em;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="div">
    <input type="text" class="email-address" value="long-long-long-user@test-test-test.com"> 
    <span>helldo</span>
</div>

【讨论】：