Home/ Questions/Q 590677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T15:33:17+00:00

I have the following input element (I deliberately omitted attributes which weren’t necessary for

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0