html vertical align the text inside input type button

Question

I\'m trying to create a button with height of \'22px\' , and that the text inside the button will be vertically aligned in the center of the button. I tried everything , and can

Answer 1

If your button weren't floated, you could use vertical-align:middle; to center the text inside it. After lots of experimentation, this was the only solution I could find that worked in IE without changing markup. (in Chrome, button text seems to be automatically centered without this hack).

But you use a float:left which forces the element to be a block element (your display:inline-block is ignored), whcih in turn prevents vertical-align from working because vertical-align doesn't work inside a block element.

So you have three choices:

• stop using floats in this form, and use inline and inline-block elements to simulate floating.
• as @stefan notes above, use another element like an and use javascript to submit the form.
• accept that in IE your buttons will be off by 1px vertically.