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> 

私は、これは、フレックスボックスを使用して行うが、私はアサイン表示せずにそれを行うことができるかどうかを知りたいと思ったことができます知っている：外側のdivに曲げます。

おかげ

Answer 1

あなたは、入力+アイコンの固定の高さを持っている場合。

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

Answer 2

使用display: table-cell：あなたは簡単に何かをしたかった場合

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

：たぶん簡単なアイコンの上に負のマージンの少量を試す、または2つの要素を揃えるしよう代替：

クイック&汚い例：

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