Html textarea 标签垂直对齐：中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19522830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
textarea label vertical-align: middle
提问by Mike
I'm trying to align the label for this text area in the middle of the text box, but it just isn't working. The output looks something like this:
我正在尝试在文本框中间对齐此文本区域的标签，但它不起作用。输出如下所示：
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Synopsis: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
Here's the code I've been trying. TY!
这是我一直在尝试的代码。泰！
<style>
label textarea{
vertical-align: middle;
}
</style>
<label>Synopsis: <textarea style="border: none" rows="7" cols="60">$v_Synopsis</textarea></label>
回答by Paulie_D
HTML
HTML
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
CSS
CSS
label,
textarea{
display:inline-block;
vertical-align:middle;
}
回答by Rogo
you can do it like this:
你可以这样做：
label { display:inline-block; vertical-align:central; }
textarea { display:inline-block; vertical-align:middle; }
回答by fiedler
This worked for me. First the textarea is floated right, then the word "address" appears before it. It's in reverse order, but displays correctly
这对我有用。首先 textarea 向右浮动，然后单词“address”出现在它之前。顺序相反，但显示正确
<p>
<span style="float:right;"><textarea rows="3" cols="32" name="Add"></textarea></span>
<span style="float:right;">Address</span>
</p>
To show:
显示：
Address┌──────────────┐
回答by KE50
This will always work and you have the flexibility of placing the label at either; top, middle or bottom
这将始终有效，您可以灵活地将标签放置在任一位置；顶部、中部或底部
HTML:
HTML：
<div id="mydiv">
<label for="mytextarea">My Label</label>
<textarea name="mytextarea"></textarea>
</div>
CSS:
CSS：
#mydiv{
display: table-cell;
}
label, textarea{
display: inline-block;
vertical-align: middle; /** Can be switched to 'top' if you so wish **/
}
回答by ColoO
you forgot : ","
你忘了 ： ”，”
<style>
label, textarea{
vertical-align: middle;
}
</style>
<label>Synopsis: </label> <textarea style="border: 1" rows="3" cols="10"></textarea>
