Html 如何垂直对齐 input type="text" 中的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12355557/
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
How to vertically align text in input type="text"?
提问by Oleg Dats
There is <input type="text" />I need to set vertical alignment of the entered text. For example middle or top.
http://jsfiddle.net/eSPMr/
有<input type="text" />我需要设置输入文本的垂直对齐方式。例如中间或顶部。
http://jsfiddle.net/eSPMr/
采纳答案by j08691
Use padding to fake it since vertical-align doesn't work on text inputs.
使用填充来伪造它，因为垂直对齐不适用于文本输入。
CSS
CSS
.date-input {
width: 145px;
padding-top: 80px;
}?
回答by Shmiddty
An alternative is to use line-height:
http://jsfiddle.net/DjT37/
另一种方法是使用line-height：http:
//jsfiddle.net/DjT37/
.bigbox{
height:40px;
line-height:40px;
padding:0 5px;
}
This tends to be more consistent when you want a specific height as you don't need to calculate padding based on font-size and desired height, etc.
当您需要特定高度时，这往往会更加一致，因为您不需要根据字体大小和所需高度等计算填充。
回答by Web Designer cum Promoter
input[type=text]
{
height: 15px;
line-height: 15px;
}
this is correct way to set vertical-middle position.
这是设置垂直中间位置的正确方法。
回答by Maddie
The <textarea>element automatically aligns text at the top of a textbox, if you don't want to use CSS to force it.
<textarea>如果您不想使用 CSS 强制对齐，该元素会自动对齐文本框顶部的文本。
回答by Stefan Brinkmann
Put it in a div tag seems to be the only way to FORCE that:
将它放在 div 标签中似乎是强制执行以下操作的唯一方法：
<div style="vertical-align: middle"><div><input ... /></div></div>
May be other tags like span works as like div do.
可能是 span 之类的其他标签和 div 一样。
回答by Brogan
I found this question while looking for a solution to my own problem. The previous answers rely on padding to make the text appear at the top or bottom of the input or use a combination of height and line-height to align the text to the vertical middle.
我在寻找解决我自己问题的方法时发现了这个问题。前面的答案依靠填充使文本出现在输入的顶部或底部，或者使用高度和行高的组合将文本与垂直中间对齐。
Here is an alternative solution to making the text appear in the middle using a div and positioning. Check out the jsfiddle.
这是使用 div 和定位使文本显示在中间的替代解决方案。查看jsfiddle。
<style type="text/css">
div {
display: inline-block;
height: 300px;
position: relative;
width: 500px;
}
input {
height: 100%;
position: absolute;
text-align: center; /* Optional */
width: 100%;
}
</style>
<div>
<input type="text" value="Hello world!" />
</div>
回答by lilhamad
IF vertical align won't work use padding.
padding-top: 10px;it will shift the text to the bottom or
padding-bottom: 10px;to shift the text in the text box to top
如果垂直对齐不起作用，请使用填充。
padding-top: 10px;它将文本移到底部或
padding-bottom: 10px;将文本框中的文本移到顶部
adjust the padding size till it suit the size you want. Thats the hack
调整填充大小，直到它适合您想要的大小。这就是黑客
