如何垂直对齐 textarea 中的占位符文本？

Question

我正在尝试垂直对齐文本区域（文本框）中的占位符文本。我正在使用 textarea 而不是文本输入，因为我需要使用多行。

 .textbox1 {
  width: 440px;
}

 <textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

原文由 user3619057 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种选择是使用 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>

您还可以使用 padding 来控制文本的位置。

这是一个使用 padding-top 的例子

 .textbox1 {
    width: 440px;
    padding-top:15px;
}

 <textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

更新

由于要求包括多行支持，我建议设置顶部和底部填充，即：

 .textbox1 {
    width: 440px;
    height:6px;
    padding: 30px 5px;
}

 .textbox1 {
    width: 440px;
    height:60px;
    padding: 30px 5px;
}

 <textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

原文由 dev7 发布，翻译遵循 CC BY-SA 3.0 许可协议