textarea 标签垂直对齐：中间

Posted 2023-05-07

【中文标题】textarea 标签垂直对齐：中间

【英文标题】：textarea label vertical-align: middle

【发布时间】：2013-10-31 14:47:21

【问题描述】：

我正在尝试在文本框中间对齐此文本区域的标签，但它不起作用。输出如下所示：

          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx      
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxx    
Synopsis: xxxxxxxxxxxxxxxxxxxxxxxxxxxx

这是我一直在尝试的代码。泰！

<style>
label textarea
 vertical-align: middle;

</style>

<label>Synopsis: <textarea style="border: none" rows="7" cols="60">$v_Synopsis</textarea></label> 

【问题讨论】：

为什么输入在标签里面？

<textarea> 在</label> 之后。接下来，jsfiddle 你的代码。

@Paulie_D 当控件位于<label> 内时，标签与控件相关联。您还可以使用显式 for 属性。

【参考方案1】：

CODEPEN DEMO

html

 <div>
  <label for="textarea">Textarea:</label>
  <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

CSS

label,
textarea
  display:inline-block;
  vertical-align:middle;

【讨论】：

谢谢，很快！

但是，当我在 style="border: none" 中添加 textarea 时，标签会回到原来的位置。不知道这是怎么回事。

也许你可以让 JSfiddle 来证明你的问题，因为删除边框（可能是糟糕的用户体验）在 Codepen 示例中没有任何区别？

jsfiddle.net/rC5nj 不确定我第一次使用 JSfiddle 是否正确。它在文本框顶部显示标签的输出，真正的输出在最后一行的左侧。我正在尝试将它放在左侧中间。

这里：jsfiddle.net/pG4KA/1 你忘了inline-block。边框移除不会缩小文本区域...它只是看起来像它。

【参考方案2】：

你可以这样做：

label  display:inline-block; vertical-align:central; 

textarea  display:inline-block; vertical-align:middle; 

【参考方案3】：

这对我有用。 首先 textarea 向右浮动，然后“地址”一词出现在它之前。 它的顺序相反，但显示正确

<p>
<span style="float:right;"><textarea rows="3" cols="32" name="Add"></textarea></span>
<span style="float:right;">Address</span>
</p>

显示：

Address┌──────────────┐

【参考方案4】：

你忘记了：","

    <style>
label, textarea
 vertical-align: middle;

</style>

<label>Synopsis: </label> <textarea style="border: 1" rows="3" cols="10"></textarea>

【讨论】：

我一直都知道出了什么问题，我需要使用 javascript 自动调整文本框的大小。

【参考方案5】：

这将始终有效，您可以灵活地将标签放置在任一位置；顶部、中间或底部

HTML：

<div id="mydiv">
    <label for="mytextarea">My Label</label>
    <textarea name="mytextarea"></textarea>
</div>

CSS：

#mydiv
    display: table-cell;


label, textarea
    display: inline-block;
    vertical-align: middle; /** Can be switched to 'top' if you so wish **/