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

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 2

Sorry in advance the simple answer...

Just 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.

I'm actually building one now that includes multi-step and css progress bar in WordPress...based off the ever popular Contact Form 7 plugin and it looks great. Let me know if you want a screenshot.

Cheers!

LaddtheImpaler

Answer 3

In my opinion, the answer on this page with the most votes is the best answer, but his math was wrong and I couldn't comment on it.

I needed a text input box to be exactly 40 pixels high including a 1 pixel border all the way around. Of course I wanted the text vertically aligned in the center in all browsers.

1 pixel border top
1 pixel border bottom
8 pixel top padding
8 pixel bottom padding
22 pixel font size

1 + 1 + 8 + 8 + 22 = 40 pixels exactly.

One thing to remember is that you must remove your css height property or those pixels will get added to your total above.

<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />

This is working in Firefox, Chrome, IE 8, and Safari. I can only assume that if something simple like this is working in IE8, it should work similarly in 6, 7, and 9 but I have not tested it. Please let me know and I'll edit this post accordingly.