2

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

如果我将文本放在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;

并像这样将两者包装在 ap 标签中

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

无济于事。

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

在此处输入图像描述

4

3 回答 3

2

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

演示

<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;
}
于 2013-04-05T12:28:22.073 回答
1

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

http://jsfiddle.net/N5NuA/

textarea {
    vertical-align: middle;
}
于 2013-04-05T12:29:29.383 回答
0

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

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

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

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

于 2013-04-05T12:43:13.687 回答