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

Question

我想创建一个高度为'22px'的按钮，并且按钮中的文本将垂直对齐按钮的中心。我尝试了一切，但无法找到如何去做。

这怎么办？

UPDATE： 这是我的代码：

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

我已经放弃了试图在按钮上对齐我的文本！现在，如果我需要它，我使用<a>标签，就像这样：

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

因此，如果文档的字体大小为12px，我的“按钮”将具有的22px高度。文本将垂直对齐。理论上讲，因为在某些阶段，“6px 5px 4px 5px”的不等填充将完成工作。

尽管这是一种破解，但这种技术对于解决旧版浏览器中的兼容性问题也很不错，比如IE6！

Answer 3

如果您的按钮没有浮动，您可以使用vertical-align:middle;来将文本置于其中。经过大量的实验，这是只有解决方案，我可以发现，在IE中工作，而无需更改标记。 （在Chrome中，按钮文本似乎在没有这种攻击的情况下自动居中）。

但是您使用float:left强制该元素为块元素（您的display:inline-block将被忽略），这反过来会防止垂直对齐工作，因为vertical-align在块元素内不起作用。

所以，你有三种选择：

• 停止使用花车以这种形式，并使用inline和inline-block元素，以模拟浮动。
• as @stefan notes above，use another element like like <a> and use javascript to submit the form。
• 接受在IE中，你的按钮将垂直偏离1px。

Answer 4

我发现，使用与填充固定宽度似乎工作（在FF至少）

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

在尝试： -

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

Answer 5

使用<button>标签代替。默认情况下，<button>标签垂直居中。

Answer 6

你可以做的最简单的事情是使用reset.css。它规范化跨浏览器的默认样式表，并巧合地允许按钮{vertical-align：middle; }工作得很好。给它一个镜头 - 我几乎在所有的项目中都使用它来杀死像这样的小错误。

https://gist.github.com/nathansmith/288292

Answer 7

我有一个按钮，其中background-image有它下面这样的文本对齐从顶部被关了一层阴影。更改line-height将无济于事。我加了padding-bottom它，它工作。

所以你要做的是确定你想玩的line-height。因此，举例来说，如果我有一个按钮谁的身高是真正90px但我想行高为80px我想有这样的事情：

input[type=butotn].mybutton{ 
    background: url(my/image.png) no-repeat center top; /*Image is 90px x 150px*/ 
    width: 150px; 
    height: 80px; /*shadow at the bottom is 10px (90px-10px)*/ 
    padding-bottom: 10px; /*the padding will make up for the lost height while maintaining the line-height to the proper height */ 

} 

我希望这有助于。

Answer 8

您可以使用flexbox（根据需要选择browser support）。

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