Vertically Center Text in an Input Element

Question

I have the following input element (I deliberately omitted attributes which weren't necessary for the example):

<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px">

In Chrome and Internet Explorer (probably Opera too), any text inside the input will be vertically centred. However, Firefox seems to ignore this declaration. Setting it to display: inline-block; instead, or using vertical-align: middle; has no effect in Firefox.

I've also tried setting the top & bottom paddings to 13px, and the height to 14px, which (combined with the font-size) will result in an element 40px tall. This works as expected; except any characters with tails (like g, q, j etc) are cut off at the bottom.

I'm looking for a cross-browser solution for vertically aligning text in an input box with a fixed height. The input element will have its own hover and focus styles, so faking the centring by positioning the element itself vertically in a 40px tall space is not really an option.

Cheers

Answer 1

I've also tried setting the top & bottom paddings to 13px, and the height to 14px, which (combined with the font-size) will result in an element 40px tall. This works as expected; except any characters with tails (like g, q, j etc) are cut off at the bottom.

How about setting only the top padding to 13px (not the bottom one) and setting the height to the remaining space, like this:

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

It works as expected in both Firefox and Chrome; I haven't access to IE at the moment, but I'm quite confident it works in IE too.