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（根据您的需要选中browser support）。

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

Answer 3

请改用<button>标记。默认情况下，<button>标签会垂直居中。

Answer 4

我放弃了尝试将按钮上的文字对齐！现在，如果我需要它，我正在使用<a>标签，如下所示：

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

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

虽然是黑客，但这种技术对于解决旧浏览器中的兼容性问题也非常有用，比如IE6！

Answer 5

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

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

尝试： -

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

Answer 6

如果您的按钮没有浮动，您可以使用vertical-align:middle;将文本居中放置。经过大量的实验，这是我能找到的唯一的解决方案，可以在IE中使用而无需更改标记。（在Chrome中，按钮文本似乎会在没有此黑客的情况下自动居中）。

但你使用float:left强制元素成为一个块元素（忽略你的display:inline-block），这反过来阻止了vertical-align的工作，因为vertical-align不能在里面工作块元素。

所以你有三个选择：

停止使用此表单中的浮点数，并使用inline和inline-block元素来模拟浮动。
正如@stefan上面所说，使用另一个元素，如＆lt; a＆gt;并使用javascript提交表单。
接受在IE中你的按钮将垂直偏离1px。

Answer 7

您可以做的最简单的事情是使用reset.css。它可以跨浏览器规范化默认样式表，巧合地允许按钮{vertical-align：middle;工作得很好。试一试 - 我几乎在所有项目中使用它只是为了消除这样的小错误。

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

Answer 8

我有一个按钮，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 9

最简单的解决方案是仅使用实际的button元素，该元素将其内容垂直居中，而在大多数或所有浏览器中都不需要任何特殊的CSS，并且可以像往常一样设置样式。

Answer 10

我的按钮遇到类似的问题。我加入了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;
}

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

10 个答案: