中心文本垂直在一行textarea旁边？

Question

我希望位于一行textarea旁边的文字与textarea垂直居中。

如果我将文本放在type="text"的输入旁边，则这是默认行为。

我喜欢坚持使用单行textarea而不是输入，因为此字段可供用户将大量预格式化数据粘贴到其中。除非程序发现问题，否则用户通常不会关心数据显示或需要查看的内容。如果发现问题，则会显示错误，如果用户可以拖出文本区域以查看数据并研究问题，则会有所帮助。

我的代码：

<tr>
<td class="vert" > New PNR Info
  <textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></td>
<td align="center">Change Fee
  <input type="text" size="4" id="fee"name="fee"></td>
</tr>

我尝试过：

像这样的css：

.vert {
    vertical-align: middle;
}

和vertical-align: top;

并将这两个包装在像这样的p标签中

<p>New PNR Info<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></p>

无济于事。

如果我的问题不明确，也许屏幕截图会有所帮助。我希望红色箭头上的违规文本像绿色箭头一样被文本挡住。

Answer 1

将垂直对齐应用于所有元素

Demo

<p class="whatever">
    <label for="alignme">Label Text</label>
    <textarea id="alignme"></textarea>
</p>

.whatever * {
    vertical-align: middle;
}

.whatever *相当于

.whatever label, .whatever textarea  {
    vertical-align: middle;
}

Answer 2

起初看起来并不合乎逻辑，但vertical-align属性需要继续使用更高的元素：

http://jsfiddle.net/N5NuA/

textarea {
    vertical-align: middle;
}

Answer 3

我认为问题在于您将父（td或p）设置为与顶部对齐，因为您的textarea位于该元素内部，它根据父对齐而不是文本对齐。

我认为可行的是设置textarea垂直对齐。

<textarea style="vertical-alignment:middle"> 

如果这不起作用，也将父元素更改为中间。如果这些更改也不起作用，也可以尝试文本区域的文本顶部或文本底部。