Html 将文本框垂直居中放置在右对齐的div中

我学到的解决方案之一是将父div元素的

显示设置为
表格单元格
，并使用
垂直对齐
属性

虽然这是可行的，但在我的例子中，我还需要父div向右浮动，但它打破了表格单元格的把戏，整个事情现在都不起作用

所以我的问题很简单：为什么会发生这种情况，更重要的是，我如何才能达到我想要的效果


div{
/*浮动：对；取消注释这将使其不起作用*/
显示：表格单元格；
垂直对齐：中间对齐；
高度：60px；
边框：1px纯红；
}

将div设置为float:right时包装所有内容。
将div设置为float:right时包装所有内容。
CSS3提供flexbox。您所需要的就是：


正文{
显示：flex；/*创建flex容器*/
对齐内容：柔性端；/*将子对象与右边缘对齐*/
}
div{
显示：flex；/*创建嵌套flex容器*/
对齐项目：居中；/*垂直居中子项*/
高度：60px；
边框：1px纯红；
}
CSS3提供flexbox。您所需要的就是：


正文{
显示：flex；/*创建flex容器*/
对齐内容：柔性端；/*将子对象与右边缘对齐*/
}
div{
显示：flex；/*创建嵌套flex容器*/
对齐项目：居中；/*垂直居中子项*/
高度：60px；
边框：1px纯红；
}
对你的小提琴进行了一些调整。希望这对你有用。
请查收

html:

<div >
<input class="form-control" id="txtWOFastNavigation">
</div>

更新您的小提琴与一些调整。希望这对你有用。
请查收

html:

<div >
<input class="form-control" id="txtWOFastNavigation">
</div>

有代码演示和它的OP标题，我想它清楚地表明它是一个文本框。另外，请告诉我为什么投反对票？请看@Michael B answer，我想这就是你需要的。OP标题上有代码演示和它，我想它清楚地显示了它是一个文本框。另外，请向下投票人告诉我为什么向下投票？请看@Michael B answer，我想这就是你需要的。看起来很好…现在我正在尝试这个，一旦成功就会接受：）还感谢用于自我学习的链接。看起来很好…现在我正在尝试这个，一旦成功就会接受：）还感谢用于自我学习的链接。