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

Question

我试图垂直对齐textarea(文本框)中的占位符文本.我使用textarea而不是文本输入,因为我需要使用多行.

.textbox1 { 
  width: 440px;
}

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

Answer 1

您可以改变行高，而不是使用padding-top来增加文本区域的高度和额外的向下空间，使用行高（这里是一个示例）。

textarea::placeholder {
line-height: 90px;

}

您还可以像这样使用转换属性：

   textarea::placeholder {
transform: translateY(-20px);

}

Answer 2

一种选择是使用line-height：

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

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

这是一个使用示例 padding-top

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

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

更新

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

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

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

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

Answer 3

这适用于纯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;
}

看到这个小提琴。关键是height将文本区域的设置line-height为与占位符相同。

可悲的是vertical-align: middle;似乎还没有得到支持。