CSS 在固定高度的输入字段内垂直对齐文本而不显示：表格或填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/326650/
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
Vertically align text within input field of fixed-height without display: table or padding?
提问by Logan Serman
The line-height property usually takes care of vertical alignment, but not with inputs. Is there a way to automatically center text without playing around with padding?
line-height 属性通常负责垂直对齐，但不负责输入。有没有办法自动居中文本而不使用填充？
采纳答案by Gerhard Dinhof
In Opera 9.62, Mozilla 3.0.4, Safari 3.2 (for Windows) it helps, if you put some text or at least a whitespace within the same line as the input field.
在 Opera 9.62、Mozilla 3.0.4、Safari 3.2（适用于 Windows）中，如果您在输入字段的同一行中放置一些文本或至少一个空格，它会有所帮助。
<div style="line-height: 60px; height: 60px; border: 1px solid black;">
<input type="text" value="foo" />
</div>
(imagine an   after the input-statement)
（想象在输入语句之后是 ）
IE 7 ignores every CSS hack I tried. I would recommend using padding for IE only. Should make it easier for you to position it correctly if it only has to work within one specific browser.
IE 7 忽略了我尝试过的每一个 CSS hack。我建议仅对 IE 使用填充。如果它只需要在一个特定的浏览器中工作，应该会让你更容易正确定位它。
回答by
I ran into this problem myself. I found that not specifying an input height, but using the font-height and padding combined, results in vertically aligned text.
我自己遇到了这个问题。我发现没有指定输入高度，而是使用字体高度和填充组合，会导致垂直对齐的文本。
For instance, lets say you want to have a 42px tall input box, with a font-size of 20px. You could simply find the difference between the input height and the font-size, divide it by two, and set your padding to that amount. In this case, you would have 22px total worth of padding, which is 11px on each side.
例如，假设您想要一个 42 像素高的输入框，字体大小为 20 像素。您可以简单地找到输入高度和字体大小之间的差异，将其除以二，然后将填充设置为该数量。在这种情况下，您将有 22 像素的总填充，即每边 11 像素。
<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />
That would give you a 42px tall input box with perfect vertical alignment.
这会给你一个 42px 高的输入框，具有完美的垂直对齐。
Hope that helps.
希望有帮助。
回答by Chris Hawes
I've not tried this myself, but try setting:
我自己没有尝试过，但尝试设置：
height : 36px; //for other browsers
line-height: 36px; // for IE
Where 36px is the height of your input.
其中 36px 是输入的高度。
回答by JimP
I know I'm late to the party but hopefully this'll help anyone looking for a concise answer that does work across all major browsers (except IE6, we have decided to stop supporting that browser so I refuse to even look at it anymore).
我知道我迟到了，但希望这能帮助任何人寻找一个适用于所有主要浏览器的简洁答案（除了 IE6，我们已经决定停止支持该浏览器，所以我什至拒绝再看它） .
#search #searchbox {
height: 21px;
line-height: 21px;
}
cheers! JP
干杯！J.P
回答by Sparky
In my opinion, the answer on this page with the most votes is the best answer, but his math was wrong and I couldn't comment on it.
在我看来，这个页面上得票最多的答案是最好的答案，但他的数学是错误的，我无法对此发表评论。
I needed a text input box to be exactly 40 pixels high including a 1 pixel border all the way around. Of course I wanted the text vertically aligned in the center in all browsers.
我需要一个文本输入框正好是 40 像素高，包括一个 1 像素的边框。当然，我希望文本在所有浏览器中垂直居中对齐。
1 pixel border top
1 pixel border bottom
8 pixel top padding
8 pixel bottom padding
22 pixel font size
1 像素边框顶部
1 像素边框底部
8 像素顶部填充
8 像素底部填充
22 像素字体大小
1 + 1 + 8 + 8 + 22 = 40 pixels exactly.
1 + 1 + 8 + 8 + 22 = 40 像素。
One thing to remember is that you must remove your css height property or those pixels will get added to your total above.
要记住的一件事是，您必须删除 css height 属性，否则这些像素将被添加到上面的总数中。
<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />
This is working in Firefox, Chrome, IE 8, and Safari. I can only assume that if something simple like this is working in IE8, it should work similarly in 6, 7, and 9 but I have not tested it. Please let me know and I'll edit this post accordingly.
这适用于 Firefox、Chrome、IE 8 和 Safari。我只能假设，如果像这样简单的东西在 IE8 中工作，它应该在 6、7 和 9 中工作，但我还没有测试过。请让我知道，我会相应地编辑这篇文章。
回答by Sparky
After much searching and frustration a combo of setting height, line height and no padding worked for me when using a fixed height (24px) background image for a text input field.
经过多次搜索和挫折后，在文本输入字段使用固定高度 (24px) 背景图像时，设置高度、行高和无填充的组合对我有用。
.form-text {
color: white;
outline: none;
background-image: url(input_text.png);
border-width: 0px;
padding: 0px 10px 0px 10px;
margin: 0px;
width: 274px;
height: 24px;
line-height: 24px;
vertical-align: middle;
}
回答by Peter Waegemans
Go for line-height.
去吧line-height。
The vertical-aligntag works fine for the submit button but not for the text in the input field.
Setting line-heightto the height of the input field works on all browsers. Incl IE7.
该vertical-align标签适用于提交按钮，但不适用于输入字段中的文本。设置line-height输入字段的高度适用于所有浏览器。包括IE7。
回答by Web Designer cum Promoter
input[type=text]
{
height: 15px;
line-height: 15px;
}
this is correct way to set vertical-middle position.
这是设置垂直中间位置的正确方法。
回答by GusRuss89
Late to the party, but the current answers won't work if you have box-sizing: border-box set (which a lot of people do for form elements these days).
聚会迟到了，但如果你有 box-sizing: border-box set（现在很多人为表单元素做的），当前的答案将不起作用。
Just reset the box sizing for IE8 to box-sizing: content-box;then use one of the padding / height answer.
只需重置 IE8 的框大小，box-sizing: content-box;然后使用填充/高度答案之一。
回答by Diego Favero
The inner vertical alignment will depend on font height and input height, so, it can be adjusted using padding !!!
内部垂直对齐将取决于字体高度和输入高度，因此，可以使用 padding 进行调整！！！
Try some like :
尝试一些像：
.InVertAlign {
height: 40px;
line-height: 40px;
font-size: 2em;
padding: 0px 14px 3px 5px;
}
...
...
<input type="text" class="InVertAlign" />
Remember to adjust the values on css class according to your needs !
请记住根据您的需要调整 css 类上的值！
