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

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

我也尝试将顶部和底部填充设置为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中运行.