在输入元素中垂直居中文本

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

我还尝试将顶部和底部填充设置为13px，将高度设置为14px，这（与字体大小相结合）将产生一个元素40px 高。这按预期工作；除了任何带尾巴的字符（如 g、q、j 等）在底部被切断。

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

干杯

Answer 1

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

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

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

它在 Firefox 和 Chrome 中都能正常工作；我目前无法访问 IE，但我很有信心它也可以在 IE 中使用。