Html 垂直对齐输入类型按钮中的文本

我试图创建一个高度为“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>
175086 次浏览
小开

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

小开

我已经放弃在按钮上排列文字了！现在，如果我需要它，我使用 <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)的兼容性问题来说，这种技巧也是相当不错的！

小开

如果您的按钮没有浮动，您可以使用 vertical-align:middle;在其中居中显示文本。经过大量的实验，我发现这是一个 只有解决方案，可以在 IE 中工作，而不需要改变标记。(在 Chrome 浏览器中，按钮文本似乎不需要这个黑客技术就可以自动居中显示)。

但是使用 float:left会强制元素成为块元素(忽略 display:inline-block) ，这反过来又会阻止垂直对齐工作，因为垂直对齐在块元素中不起作用。

所以你有三个选择:

  • 停止使用这种形式的浮点数，并使用 inline和 inline-block元素来模拟浮点数。
  • 正如@stefan 上面提到的，使用像 < a > 这样的另一个元素并使用 javascript 提交表单。
  • 接受在 IE 中你的按钮将被关闭1px 垂直。
小开

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

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

试试看:-

Http://jsfiddle.net/stevenally/z32kg/

小开

使用 <button>标签代替。 <button>标签默认是垂直居中的。

小开

您可以做的最简单的事情是使用 reset.css。它规范化了不同浏览器的默认样式表，并且巧合地允许按钮{竖直对齐: 居中; }工作得很好。给它一个尝试-我使用它在几乎所有我的项目只是为了杀死这样的小错误。

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

小开

我有一个按钮，其中的 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 */


}

希望这个能帮上忙。

小开

使用软盒:

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

您可以使用 弹簧箱(根据您的需要选择 浏览器支持)。

小开

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

提交答案