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盒來完成，但想知道如果我能做到這一點不分配顯示：彎曲到外層div。

謝謝

Answer 1

如果你有一個固定的高度輸入+圖標。也許簡單的嘗試切緣陰性少量到圖標上方，或試圖對準兩個元素：

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

如果你想要的東西很簡單：

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

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