Html 使用 CSS 在文本框中居中（垂直）文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3432200/
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
Centering text (vertically) inside a textbox using CSS
提问by Amit
I'm currently working with a textbox that has a background. I was wondering if it's possible to center text (vertically) inside the textbox.
我目前正在使用具有背景的文本框。我想知道是否可以在文本框中将文本（垂直）居中。
important: it's perfectly centered in firefox. Only IE it writes it too high for some reason. I've tried line-height, padding, and margin. Nothing works. Any ideas?
重要：它完全以 Firefox 为中心。只有 IE 出于某种原因它写得太高了。我尝试过行高、填充和边距。什么都行不通。有任何想法吗？
EDIT: This is my current CSS. I should say that I've tried the margin-top method and it didn't work for me. Also, as I mentioned, this is only for IE. I have IE specific style sheets so no worries.
编辑：这是我目前的 CSS。我应该说我已经尝试过 margin-top 方法，但它对我不起作用。另外，正如我所提到的，这仅适用于 IE。我有 IE 特定的样式表，所以不用担心。
.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }
For IE, I have the following:
对于 IE，我有以下内容：
.textValue { font-size: 14px; }
as for HTML:
至于 HTML：
<tr>
<td><label for="name">name</label></td>
<td><input type="text" name="name" id="name" class="textValue" value="" /></td>
</tr>
Thanks, Amit
谢谢，阿米特
回答by Sarfraz
I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:
我想知道您如何能够在文本框中对齐文本，但既然您这么说，那么建议如下：
For idiot IE, you can use this IE specific hack:
对于白痴 IE，您可以使用此特定于 IE 的 hack：
margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */
You might want to try other similar properties if you want rather than margin-top.
如果您愿意，您可能想尝试其他类似的属性而不是margin-top.
回答by Matt Williamson
Did you try?:
你试过了吗？：
input {vertical-align: middle;}
回答by Paul Hadfield
I know this one's a bit old, but I've just run into the same problem. The solution given here didn't help me which seemed strange. In my case it was the line height that was set to "1em". Changing the line height to something that resembled the height of the text box, rather than the size of the font it contained was the solution. This also continues to function as expected in Firefox, etc.
我知道这个有点旧，但我刚刚遇到了同样的问题。这里给出的解决方案对我没有帮助，这看起来很奇怪。在我的情况下，它是设置为“1em”的行高。解决方案是将行高更改为类似于文本框的高度，而不是它包含的字体大小。这也继续在 Firefox 等中按预期运行。
