html垂直对齐输入类型按钮内的文本 [英] html vertical align the text inside input type button

问题描述

我试图创建一个高度为'22px'的按钮，并且按钮内的文本将在按钮的中心垂直对齐。

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.

如何做到这一点？

UPDATE：
这是我的代码：

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>

推荐答案

尝试添加属性 -height：22px; 到代码。

这篇关于html垂直对齐输入类型按钮内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！