Create a shortcut for the text box next to it, but center it vertically

Question

Please take a look at this script: http://jsfiddle.net/hughbe/QYGcq/

As you can see, the label for <textarea id = "FooText"></textarea> is next to textarea , as it should be, however I would like to make the label vertically next to the text box or at the top of the text box, not at the bottom like in this fiddle.

I tried setting its css to vertical-align: middle , but that didn't work. What to do to align the label at the top or middle?

Thanks.

Answer 1

Use vertical-align: middle in the text box http://jsfiddle.net/VxY6m/

Because vertical alignment means that in this case it refers to a text string.

Answer 2

Try the following:

 <style> label { display: block; float: left; padding-top: 8px } textarea { resize: none; overflow-y: hidden; } </style> <label for="FooText">Content:</label> <textarea id="FooText"></textarea> 

What I did was make the label a block element and apply the top pad to it. See also fiddle .