Html html垂直对齐输入类型按钮内的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5184856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html vertical align the text inside input type button
提问by user590586
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.
我正在尝试创建一个高度为 '22px' 的按钮，并且按钮内的文本将在按钮的中心垂直对齐。我尝试了所有方法，但不知道该怎么做。
how can this be done?
如何才能做到这一点？
UPDATE:this is my code:
更新：这是我的代码：
CSS:
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:
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>
回答by JAiro
Try adding the property line-height: 22px;to the code.
尝试将属性添加line-height: 22px;到代码中。
回答by Pensierinmusica
You can use flexbox(check browser support, depending on your needs).
.testbutton {
display: inline-flex;
align-items: center;
}
回答by peterhry
Use the <button>tag instead. <button>labels are vertically centered by default.
改用<button>标签。<button>默认情况下，标签垂直居中。
回答by stevenally
I found that using a fixed width with padding seems to work (in ff at least)
我发现使用带有填充的固定宽度似乎有效（至少在 ff 中）
.Btn
{
width:75px;
padding:10px;
}
Try it at:-
试试看：-
回答by StefanNch
I've given up trying to align my text on buttons! Now, if I need it, I'm using <a>tags, like so:
我已经放弃了在按钮上对齐文本的尝试！现在，如果我需要它，我正在使用<a>标签，如下所示：
<a href="javascript:void();" style="display:block;font-size:1em;padding:5px;cursor:default;" onclick="document.getElementById('form').submit();">Submit</a>
So, if the document's font size is 12px, my "button" will have 22px height. And the text will be vertically align. That in theory, because, in some casses, an unequal padding of "6px 5px 4px 5px" will do the job done.
因此，如果文档的字体大小为 12 像素，我的“按钮”将具有 22 像素的高度。文本将垂直对齐。从理论上讲，因为在某些情况下，“6px 5px 4px 5px”的不等填充将完成工作。
Although, is a hack, this technique is pretty good for solving compatibility issues in older browsers too, like IE6!
虽然，这是一个 hack，但这种技术对于解决旧浏览器中的兼容性问题也很不错，比如 IE6！
回答by Justin Grant
If your button weren't floated, you could use vertical-align:middle;to center the text inside it. After lots of experimentation, this was the onlysolution I could find that worked in IE without changing markup. (in Chrome, button text seems to be automatically centered without this hack).
如果您的按钮没有浮动，您可以使用vertical-align:middle;将其中的文本居中。经过大量实验，这是我能找到的唯一解决方案，它可以在不更改标记的情况下在 IE 中运行。（在 Chrome 中，按钮文本似乎在没有这个 hack 的情况下自动居中）。
But you use a float:leftwhich forces the element to be a block element (your display:inline-blockis ignored), whcih in turn prevents vertical-align from working because vertical-align doesn't work inside a block element.
但是您使用 afloat:left强制元素成为块元素（您的display:inline-block被忽略），这反过来又会阻止垂直对齐工作，因为垂直对齐在块元素内不起作用。
So you have three choices:
所以你有三个选择：
- stop using floats in this form, and use
inlineandinline-blockelements to simulate floating. - as @stefan notes above, use another element like an <a> and use javascript to submit the form.
- accept that in IE your buttons will be off by 1px vertically.
- 停止使用这种形式的浮动，并使用
inline和inline-block元素来模拟浮动。 - 正如@stefan 上面提到的，使用另一个元素，如 <a> 并使用 javascript 提交表单。
- 接受在 IE 中您的按钮将垂直关闭 1px。
回答by Seven Systems
The simplest solution would be to simply use an actual buttonelement, which centers its content vertically without any special CSS in most or all browsers, and can otherwise be styled as usual.
最简单的解决方案是简单地使用一个实际的button元素，它的内容垂直居中，在大多数或所有浏览器中没有任何特殊的 CSS，否则可以像往常一样设置样式。
回答by Alan L.
The simplest thing you can do is use reset.css. It normalizes the default stylesheet across browsers, and coincidentally allows button { vertical-align: middle; } to work just fine. Give it a shot - I use it in virtually all of my projects just to kill little bugs like this.
您可以做的最简单的事情是使用 reset.css。它规范了浏览器的默认样式表，并且巧合地允许按钮 { vertical-align: middle; 工作得很好。试一试 - 我几乎在我所有的项目中都使用它来杀死这样的小错误。
回答by Philll_t
I had a button where the background-imagehad a shadow below it so the text alignment was off from the top. Changing the line-heightwouldn't help. I added padding-bottomto it and it worked.
我有一个按钮，background-image它下面有一个阴影，所以文本对齐从顶部偏离。换了line-height也没用。我添加padding-bottom了它并且它起作用了。
So what you have to do is determine the line-heightyou want to play with. So, for example, if I have a button who's height is truly 90pxbut I want the line-height to be 80pxI would have something like this:
所以你要做的是确定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 */
}
I hope this helps.
我希望这有帮助。
