The vertical text of the center in the input element

Question

I have the following input element (I intentionally missed attributes that were not necessary for the example):

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

In Chrome and Internet Explorer (perhaps Opera too), any text inside the input will be vertically centered. However, Firefox seems to ignore this expression. Instead, instead of display: inline-block; or using vertical-align: middle; not valid in Firefox.

I also tried setting the upper and lower paddings to 13px , and the height to 14px , which (combined with the font size) would result in a 40px tall element. This works as expected; except for characters with tails (e.g. g, q, j, etc.), bottom to bottom.

I am looking for a cross-browser solution for vertically aligning text in a fixed-height input field. The input element will have its own guidance and focusing style, so giving centering meaning by positioning the element vertically in the 40px top space is not really an option.

Greetings

Answer 1

I also tried to set the top and bottom pads to 13 pixels, and the height to 14 pixels, which (combined with the font size) will cause the 40px element to grow. This works as expected; except for characters with tails (e.g. g, q, j, etc.), bottom to bottom.

How to set only the top padding to 13 pixels (and not the bottom) and set the height in the remaining space, for example:

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

It works in both Firefox and Chrome; At the moment, I do not have access to IE, but I am sure that it works in IE too.