Html 如何在 textarea 中垂直对齐占位符文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36193459/
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 do I vertically align placeholder text in textarea?
提问by user3619057
I am trying to vertically align the placeholder text in textarea (textbox). I am using textarea instead of text input because I need to use multiple lines.
我正在尝试垂直对齐 textarea（文本框）中的占位符文本。我使用 textarea 而不是文本输入，因为我需要使用多行。
.textbox1 {
width: 440px;
}<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>回答by dev7
One option is to use line-height:
一种选择是使用line-height：
.textbox1 {
width: 440px;
height:30px;
line-height:30px;
}
.textbox1 {
width: 440px;
height:30px;
line-height:30px;
}<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>You can also use paddingto control the position of the text.
您还可以使用padding来控制文本的位置。
Here's an example using padding-top
这是一个使用示例 padding-top
.textbox1 {
width: 440px;
padding-top:15px;
}<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>UPDATE
更新
Since the requirements include multi-line support, I'd recommend setting the top and bottom padding i.e:
由于要求包括多行支持，我建议设置顶部和底部填充，即：
.textbox1 {
width: 440px;
height:6px;
padding: 30px 5px;
}
.textbox1 {
width: 440px;
height:60px;
padding: 30px 5px;
}<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>回答by Christian Gollhardt
This works for latest Firefox, IE/Edge, Chrome in pure CSS:
这适用于纯 CSS 中最新的 Firefox、IE/Edge、Chrome：
textarea {
width: 440px;
height:600px; /* Note this is the same height as the placeholders line-height */
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
line-height:600px;
}
:-ms-input-placeholder { /* IE */
line-height:600px;
}
See this fiddle. The key is to set the heightof the textarea to the same line-heightas the placeholder.
看到这个小提琴。关键是要设置heighttextarea的line-height和占位符一样。
Sadly vertical-align: middle;seems not to be supported yet.
可悲的是vertical-align: middle;似乎还没有得到支持。
回答by collect
Your best bet is to use padding, as line heightwill not work over multiple lines.
最好的办法是使用padding，因为它line height不能在多行上工作。
Additionally, make sure to take into account the line height / font size when calculating your padding.
此外，请确保在计算填充时考虑行高/字体大小。
回答by rmondesilva
I guess this is not exactly what you want, But try to look ..
我想这不完全是你想要的，但试着看看..
To center it vertically, I multiplied the height of the element to 7.5%and make it line-height.
为了垂直居中，我将元素的高度乘以7.5%使其成为 line-height。
.textbox1{
width: 440px;
height:100px;
line-height: calc(100 * 7.5%);
}
.textbox1:focus{
line-height: 14px;
}
Check it here. pure CSS jsFiddle
在这里检查。纯 CSS jsFiddle
Note: CSS3 calc() function only works on modern browsers. You can manually change/calculate the line-height if you want it to work on older browsers.
注意：CSS3 calc() 函数仅适用于现代浏览器。如果您希望它在旧浏览器上工作，您可以手动更改/计算行高。
or you really have to use jQuery
或者你真的必须使用jQuery
I made a help of jQuery here jQuery jsFiddle
我在这里帮助了 jQuery jQuery jsFiddle
回答by SHUBHAM SINGH
Use the line-heightproperty to make the placeholder vertically centered.
使用该line-height属性使占位符垂直居中。
回答by Sunday White
Instead of using padding-topwhich will increase the height of the textarea and extra space down use the line-heighthere is a sample, you can vary the line-height.
而不是使用padding-top会增加 textarea 的高度和额外的空间向下使用line-height这里是一个示例，您可以改变 line-height。
textarea::placeholder {
line-height: 90px;
}
}
you can also use transformproperty like this:
您还可以像这样使用转换属性：
textarea::placeholder {
transform: translateY(-20px);
}
}
回答by MrRobboto
Just as an alternate solution - you could set the rows to an odd number and add half the rows rounded down in line feed characters to put the placeholder in the middle...
作为替代解决方案 - 您可以将行设置为奇数，并在换行符中添加向下舍入的行的一半，以将占位符放在中间...
.textbox1 {
width: 440px;
}<textarea class="textbox1"name="mytextarea"placeholder=" Name" rows=3></textarea>