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

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.

Answer 2

Late to the party, but the current answers won't work if you have box-sizing: border-box set (which a lot of people do for form elements these days).

Just reset the box sizing for IE8 to box-sizing: content-box; then use one of the padding / height answer.

Answer 3

You should remove your title text and use the input placeholder for your label's title. Some visual and CSS work after that and your form will be looking tight and user friendly. I'm aware of the disadvantages but this will completely relieve the alignment wrestling.

Answer 4

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.