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

【问题标题】：html vertical align the text inside input type buttonhtml垂直对齐输入类型按钮内的文本
【发布时间】：2011-07-08 06:39:33
【问题描述】：

我正在尝试创建一个高度为 '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>

【问题讨论】：

标签： html css

【解决方案1】：

使用弹性框：

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

您可以使用flexbox（查看browser support，取决于您的需要）。

【讨论】：

干净简单。
迄今为止我见过的最好的解决方案。也适用于不同高度的按钮。（例如，带边框的按钮）
要使其水平居中，添加“justify-content: space-around;”
回到我之前的评论，这似乎不是一个合适的解决方案，因为button 元素不能有display: flex;。查看这个问题了解更多信息：stackoverflow.com/questions/35464067/…

【解决方案2】：

我的按钮也有类似的问题。我包括了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;
}

【讨论】：

【解决方案3】：

我有一个按钮，background-image 在它下方有一个阴影，因此文本对齐从顶部偏离。更改 line-height 无济于事。我在其中添加了padding-bottom，它起作用了。

所以你要做的就是确定你想玩的line-height。因此，例如，如果我有一个按钮，其高度确实是 90px，但我希望 line-height 是 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 */

}

我希望这会有所帮助。

【讨论】：

它发生了，不用担心。

【解决方案4】：

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

【讨论】：

我添加了“line-hight”属性，但它仍然无法正常工作。我已经用我的代码更新了我的问题。谢谢！
嗨！您已经尝试过您的代码，并且按钮内的文本“导入”正确对齐，我不明白什么是磨损。我在 Firefox 和 chrome 中试过这个。
我使用的是 IE，所以我没有在 Firefox 或 chrome 中检查它，我将输入改为按钮，现在它可以工作了。谢谢你的帮助！
用 line-height 进行实验似乎也对我有用，最终...谢谢！
我为所有不同大小的按钮设置了line-height: 0;，以正确且自动地垂直对齐文本、svg 图像等。按钮根据内容调整自己的大小。

【解决方案5】：

您可以做的最简单的事情是使用 reset.css。它标准化了跨浏览器的默认样式表，巧合的是允许 button { vertical-align: middle; } 工作得很好。试一试——我几乎在所有项目中都使用它，只是为了杀死这样的小错误。

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

【讨论】：

【解决方案6】：

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

【讨论】：

是的，按钮标签内的内容在每个浏览器中默认居中。这是一个演示：codepen.io/peterhry/pen/arDAF
郑重声明，在 flexbox 得到广泛支持之前，这是一个有用的 hack，但今天没有充分的理由使用它。
在某些情况下看起来居中，但不在 50% 的位置。

【解决方案7】：

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

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

试试看：-

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

【讨论】：

【解决方案8】：

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

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

所以你有三个选择：

在这种形式下停止使用浮动，使用inline和inline-block元素来模拟浮动。
正如上面@stefan 所说，使用另一个元素，如并使用 javascript 提交表单。
接受在 IE 中您的按钮将垂直关闭 1 像素。

【讨论】：

【解决方案9】：

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

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

因此，如果文档的字体大小为 12 像素，我的“按钮”将有 22 像素的高度。并且文本将垂直对齐。理论上是这样，因为在某些情况下，“6px 5px 4px 5px”的不相等填充将完成这项工作。

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

【讨论】：