textarea label vertical-align:middle

时间:2013-10-22 16:00:09

标签: html css textarea vertical-alignment

我正在尝试在文本框的中间对齐此文本区域的标签,但它只是不起作用。输出看起来像这样:

          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx      
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxx    
Synopsis: xxxxxxxxxxxxxxxxxxxxxxxxxxxx

这是我一直在尝试的代码。 TY!

<style>
label textarea{
 vertical-align: middle;
}
</style>

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

5 个答案:

答案 0 :(得分:10)

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;

}

答案 1 :(得分:1)

你可以这样做:

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

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

答案 2 :(得分:0)

你忘记了:“,”

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

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

答案 3 :(得分:0)

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

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

显示:

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

答案 4 :(得分:0)

这将始终有效,您可以灵活地将标签放在任何一个位置;顶部,中部或底部

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 **/
}