Wednesday, May 02, 2012

CSS vertical-align Property

I had an issue where I needed to vertically align a label to the top of a textarea. Here's the sample html:

<p>
    <label for="txtDesc">Description</label>
    <textarea id="txtDesc"></textarea>
</p>

Here's what it looked like:

My first inclination was to put a "vertical-align: top" css rule on the label to raise it up to the "top" of the text area. However, that didn't work.

The trick was to use the rule on the text area instead. Here's that same code with "vertical-align: top;" applied to the textarea:

No comments: