html vertical align the text inside input type button

Solution 1:

Using flexbox:

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

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

Solution 2:

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

Solution 3:

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

Solution 4:

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/

Solution 5:

I was having a similar issue with my button. I included line-height: 0; and it appears to have worked. Also mentioned by @anddero.

button[type=submit] {
  background-color: #4056A1;
  border-radius: 12px;
  border: 1px solid #4056A1;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 2px 1px;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 20px;
  line-height: 0;
}