Vertically align text within input field of fixed-

Question

The line-height property usually takes care of vertical alignment, but not with inputs. Is there a way to automatically center text without playing around with padding?

Answer 1

I ran into this problem myself. I found that not specifying an input height, but using the font-height and padding combined, results in vertically aligned text.

For instance, lets say you want to have a 42px tall input box, with a font-size of 20px. You could simply find the difference between the input height and the font-size, divide it by two, and set your padding to that amount. In this case, you would have 22px total worth of padding, which is 11px on each side.

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

That would give you a 42px tall input box with perfect vertical alignment.

Hope that helps.

Answer 2

I've not tried this myself, but try setting:

height : 36px; //for other browsers
line-height: 36px; // for IE

Where 36px is the height of your input.

Answer 3

Go for line-height.

The vertical-align tag works fine for the submit button but not for the text in the input field. Setting line-height to the height of the input field works on all browsers. Incl IE7.

Answer 4

Just don't set the height of the input box, only set the font-size, that will be ok

Answer 5

this example can resolve your problems forever:

add this to the input css property and never add % instead of px:

height:25px;

Answer 6

If your element is a block element contained/or with display like so:

display: table-cel

Or, with an fixed line-height, you can set the vertical align like so:

Vertical-Align: Middle;

It won't work for other cases, but it works fine on these conditions.