居中文本垂直旁边的一行textarea？

我希望位于一行textarea旁边的文本与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>

无济于事。

如果我的问题不清楚，也许截图会有所帮助。我希望红色箭头的违规文本能够像绿色箭头一样被文字消除。

enter image description here

来源

2013-04-05 DelightedD0D

这看起来不像表格数据... – cimmanon 2013-04-05 12:27:18

它似乎没有逻辑在第一，但是垂直对齐属性需要去更高的元素：

http://jsfiddle.net/N5NuA/

textarea { 
    vertical-align: middle; 
}

来源

2013-04-05 12:29:29 cimmanon

甚至没有发生过我的人，非常反直觉。非常感谢你！ – DelightedD0D 2013-04-05 12:43:24

应用垂直取向，以像这样的所有元素

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

来源

2013-04-05 12:28:22

与cimmanon的答案一起简单，但这也工作和'。不管什么*'部分是一个很好的捷径，我没有意识到，谢谢 – DelightedD0D 2013-04-05 12:42:16

@ DelightedD0D没有问题:)而且你也欢迎 – 2013-04-05 12:42:59

我相信这个问题是要设置父（TD或P）对齐到顶部，因为你的textarea的是该元素里面根据父母对齐，而不是文本。

我认为会工作的是设置textarea垂直对齐。

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

如果这样不起作用，还要将父元素更改为中间值。如果这些更改不起作用，请尝试文本区域的文本顶部或文本底部。

来源

2013-04-05 12:43:13

居中文本垂直旁边的一行textarea？

回答

相关问题