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" />&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.

After much searching and frustration a combo of setting height, line height and no padding worked for me when using a fixed height (24px) background image for a text input field.

.form-text {
    color: white;
    outline: none;
    background-image: url(input_text.png);
    border-width: 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    width: 274px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}

This is how I do it.

<ul>
   <li>First group of text here.</li>
   <li><input type="" value="" /></li>
</ul>

then inside your CSS file,

ul li {
  display: block;
  float: left;
}

That should work for you.

The inner vertical alignment will depend on font height and input height, so, it can be adjusted using padding !!!

Try some like :

.InVertAlign {
   height: 40px;
   line-height: 40px;
   font-size: 2em;
   padding: 0px 14px 3px 5px;
}

...

<input type="text" class="InVertAlign" />

Remember to adjust the values on css class according to your needs !

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.