在单行文本区域旁边垂直居中文本？答案

【问题标题】：Center text vertically next to a one row textarea?在单行文本区域旁边垂直居中文本？
【发布时间】：2013-03-27 20:48:43
【问题描述】：

我希望位于单行文本区域旁边的文本与文本区域垂直居中。

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

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

我的代码：

<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>

无济于事。

如果我的问题不清楚，也许截图会有所帮助。我希望红色箭头旁的违规文字与绿色箭头旁的文字一样。

【问题讨论】：

这看起来不像表格数据...

标签： html css html-table alignment

【解决方案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;
}

【讨论】：

为简单起见，使用 cimmanon 的答案，但这也有效，.whatever * 部分是我不知道的一个很好的捷径，谢谢

【解决方案2】：

一开始看起来不合逻辑，但是vertical-align属性需要放在高大的元素上：

http://jsfiddle.net/N5NuA/

textarea {
    vertical-align: middle;
}

【讨论】：

我什至没有想到的人，非常违反直觉。非常感谢！

【解决方案3】：

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

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

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

如果这不起作用，也将父元素更改为中间。如果这些更改也不起作用，还可以尝试 text-top 或 text-bottom 作为文本区域。

【讨论】：