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 
}