CODEWITHSUNDEEP
htmlcsstextareavertical-alignment
Mike
Mike

Reputation: 121

textarea label vertical-align: middle

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>

Upvotes: 12

Views: 55251

Answers (5)

fiedler
fiedler

Reputation: 1

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

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

To show:

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

Upvotes: 0

Rogo
Rogo

Reputation: 9

you can do it like this: 

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

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

Upvotes: 0

KE50
KE50

Reputation: 556

This will always work and you have the flexibility of placing the label at either; top, middle or bottom

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

Upvotes: -1

ColoO
ColoO

Reputation: 833

you forgot : ","

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

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

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 114991

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;

}

Upvotes: 18

Related Questions