Css 输入标签上的Flexbox垂直对齐问题
基本上，我有一个Css 输入标签上的Flexbox垂直对齐问题,css,vertical-alignment,flexbox,Css,Vertical Alignment,Flexbox,基本上，我有一个标签和一个文本输入在flexbox中相互内联，其中输入灵活，对齐项目设置为基线。输入可以灵活地正确填写包含的div，但是标签与输入的底部对齐，而不是文本基线的位置 这个问题出现在Chrome浏览器中，也可能出现在其他WebKit浏览器中 这是密码 HTML: 如果注释掉display:flex，则对齐是正确的，但它自然不再弯曲 如何在不使用类似于对齐项目：居中的破解方法的情况下修复此问题 注意：我最初在另一个问题中发布了这个问题和答案，并将其删除。我已经按照建议对它进行了修改，希
标签输入输入对齐项目输入div标签输入display:flex对齐项目：居中注意：我最初在另一个问题中发布了这个问题和答案，并将其删除。我已经按照建议对它进行了修改，希望它现在符合指导原则。基本上，在
输入值或占位符
属性，布局引擎将输入
的基线解释为输入
的底部，而不是文本基线应该位于的位置
因此，修改后的HTML如下所示：
<div>
<label>Email:</label>
<input type='text' value='example@gmail.com' />
</div>
电邮：
或
电邮：
这是布局引擎的一个bug，已经通知了开发人员 再加上其他答案，
如果你不想实际显示任何占位符文本，效果会很好。这似乎还是有问题，你有提出问题的地方的链接吗？@slicedtoad我不完全清楚你的意思。需要详细说明吗？你说你通知了开发人员，我想这意味着你在某个地方发布了这个bug：或者谷歌chrome产品论坛。我想你可以使用“报告问题”按钮though@slicedtoad这是个好问题！我不确定是在哪里提出来的。很可能是其他bug优先考虑了它们。我想你可以再向他们提起！跟踪器中的问题是：是否有某种方法可以使用CSS选择器将空占位符文本应用于所有文本输入字段？使用jQuery添加占位符似乎不起作用：在Chrome中修复对齐问题不起作用。我添加了一个红色框来说明在运行JSFIDLE之后仍然存在的未对齐情况。。。
div{
width:20rem;
background:#999;
padding:.5rem;
display:flex;
align-items:baseline;
}
input{
flex:1;
}
<div>
<label>Email:</label>
<input type='text' value='example@gmail.com' />
</div>
<div>
<label>Email:</label>
<input type='text' placeholder='example@gmail.com' />
</div>