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

Use the <button> tag instead. <button> labels are vertically centered by default.

Answer 2

I've given up trying to align my text on buttons! Now, if I need it, I'm using <a> tags, like so:

<a href="javascript:void();" style="display:block;font-size:1em;padding:5px;cursor:default;" onclick="document.getElementById('form').submit();">Submit</a>

So, if the document's font size is 12px, my "button" will have 22px height. And the text will be vertically align. That in theory, because, in some casses, an unequal padding of "6px 5px 4px 5px" will do the job done.

Although, is a hack, this technique is pretty good for solving compatibility issues in older browsers too, like IE6!

Answer 3

I found that using a fixed width with padding seems to work (in ff at least)

.Btn
 {
   width:75px;
   padding:10px;
 }

Try it at:-

http://jsfiddle.net/stevenally/z32kg/

Answer 4

The simplest solution would be to simply use an actual button element, which centers its content vertically without any special CSS in most or all browsers, and can otherwise be styled as usual.