CSS樣式的人造文本輸入從DIV模仿HTML輸入

Question

我有一個正常的html input和一個人造的從一個div構建。我希望他們看起來和行爲一致。 我可以通過CSS實現除了一個以外的每個方面： 垂直居中文本。 正常的HTML輸入垂直居中文本，不管輸入有多高。您可以通過設置行高來實現此目的，但這對於本機輸入不是必需的。 那麼這背後有什麼魔力？

Answer 1

好的，在Chrome中激活「顯示用戶代理陰影DOM」會揭示他們是如何做到的。 這是他們所使用的內部HTML結構：

<div id="text-field-container" pseudo="-webkit-textfield-decoration-container"> 
    <div id="editing-view-port"> 
    <div id="inner-editor">10</div> 
    </div> 
    <div pseudo="-webkit-inner-spin-button" id="spin"> 
    </div> 
</div> 

而這種柔性盒魔術垂直居中輸入文本：

input::-webkit-textfield-decoration-container { 
    display: flex; 
    align-items: center; 
    -webkit-user-modify: read-only; 
    content: none; 
} 

Answer 2

給你的div一個table-cell顯示屬性。

.v-center { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 120px; 
 
    background: grey; 
 
}

<div class="v-center">This text is vertically centered</div>

Answer 3

也許表單元格是你在找什麼：

// HTML

<div class="test" contenteditable></div> 

// CSS

.test { 
    display: table-cell; 
    vertical-align: middle 
}