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't find out how to do it.

how can this be done?

UPDATE: this is my code:

CSS:

.test1 label {     float: left;     clear: left;     width:31%;     margin-right:-2px; } .test1 input {     float:left;     width:69%;     margin-right:-2px; } .testbutton {     float:left;     margin-left: 10px;     height: 22px;     line-height: 22px;     text-align:center;     background-color:#fbfbfb;     border:1px solid #b7b7b7;     color:#606060;     cursor:pointer;     display:inline-block;     font:bold 12px/100% Arial, sans-serif; } 

HTML:

<div class="test1"> <label for="test" title="test">test</label>                                 <input style="width:18px; float:left;" type="checkbox" name="test" id="test" tabindex="5" /> <input class="testbutton" id="testbutton" style="width:60px;"type="button" value="Import" /></div> 

Answer 1

Using flexbox:

.testbutton {   display: inline-flex;   align-items: center;  } 

You can use flexbox (check browser support, depending on your needs).

Answer 2

Try adding the property line-height: 22px; to the code.