我有以下输入元素(我故意省略了示例不需要的属性):
<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/>
在 Chrome 和 Internet Explorer(也可能是 Opera)中,输入中的任何文本都将垂直居中。然而,Firefox 似乎忽略了这个声明。将其设置为display: inline-block;
,或使用vertical-align: middle;
在 Firefox 中无效。
我还尝试将顶部和底部填充设置为13px
,并将高度设置为14px
,这(与字体大小相结合)将导致元素40px
高。这按预期工作;除了任何带尾巴的字符(如g、q、j等)在底部被切断。
我正在寻找一种跨浏览器解决方案,用于在具有固定高度的输入框中垂直对齐文本。输入元素将有自己的悬停和焦点样式,因此通过将元素本身垂直定位在40px
高大的空间中来伪装居中并不是一个真正的选择。
干杯