html垂直对齐输入类型按钮内的文本

Question

我正在尝试创建一个高度为"22px"的按钮,按钮内的文本将垂直对齐在按钮的中心.我尝试了一切,但却找不到怎么做.

如何才能做到这一点？

更新: 这是我的代码:

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

尝试将该属性添加line-height: 22px;到代码中.

Answer 2

您可以使用flexbox(根据您的需要检查浏览器支持).

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

Answer 3

请改用<button>标签.<button>标签默认垂直居中.

Answer 4

我发现使用带填充的固定宽度似乎有效(至少在ff中)

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

试试: -

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

Answer 5

我的按钮也遇到了类似的问题。我加入了line-height: 0;，它似乎有效。@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;
}