Vertically align text within input field of fixed-height without display: table or padding?

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

Try :

height: 21px;
line-height: 21px; /* FOR IE */

Because on some versions of IE (< 9) the property height is not properly interpreted.

Answer 2

In Opera 9.62, Mozilla 3.0.4, Safari 3.2 (for Windows) it helps, if you put some text or at least a whitespace within the same line as the input field.

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(imagine an &nbsp after the input-statement)

IE 7 ignores every CSS hack I tried. I would recommend using padding for IE only. Should make it easier for you to position it correctly if it only has to work within one specific browser.

Answer 3

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 4

input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

this is correct way to set vertical-middle position.

Answer 5

I was just working on this within MaterialUI's text inputs. Adding padding-top: 0.5rem to the input style worked for me. While this was adjusting the padding, at least you don't need to worry about adjusting for updates, much less different breakpoints.

Answer 6

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