Vertically align text within input field of fixed-height without display: table or padding?
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.
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.
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" />
</div>
(imagine an   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.