Question

我有以下输入元素（我故意省略了该示例不必要的属性）：

<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中无效。

我也试过设置顶部＆amp;底部填充为13px，高度为14px，（与字体大小相结合）将导致元素40px高。这按预期工作;除了任何带尾部的字符（如 g ， q ， j 等）在底部被截断。

我正在寻找一种跨浏览器解决方案，用于在具有固定高度的输入框中垂直对齐文本。输入元素将具有自己的悬停和焦点样式，因此通过将元素本身垂直放置在40px高的空间中来伪装居中并不是一种选择。

干杯

Answer 1

我也试过设置顶部＆amp;底部填充为13px，高度为14px（与字体大小相结合）将导致元素高40px。这按预期工作;除了任何带尾巴的字符（如g，q，j等）在底部被切断。

如何仅将顶部填充设置为13px（而不是底部填充）并将高度设置为剩余空间，如下所示：

<input type="text" style="display: block; height: 27px; padding-top: 13px; font-size: 14px">

它在Firefox和Chrome中均可正常运行;我目前暂时无法访问IE，但我非常有信心它也可以在IE中运行。