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 to outer div。

Answer 1

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

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

如果你想要一些简单的事情：

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

Answer 2

使用display: table-cell替代：

快速＆amp;肮脏的例子：

.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>

在div中垂直对齐输入+字体图标？

2 个答案: