Textarea Placement Is Wonky

Why is my text area placement different than my input type='text' placement? Snippet related.

Solution 1:

If you mean its placement regarding the sibling inputs then you can set vertical-align for the textarea:

textarea {
    vertical-align: middle;
    /* the rest of your styles */
}

EDIT:

Vertical-align has default value of baseline. The baseline for textarea is towards the bottom (if you have an inline-block div instead of the textarea it'd be the same). But baseline for input[type=text] - as it naturally has only one line - is in the middle. So we need to explicitly add vertical-align: middle for the textarea.

Solution 2:

I've made some assumption to try and best answer your question. Check out the code snippet and feel free to let me know if I misunderstood your question.

Basically, the reason that input buttons in the second form due not vertically align is because the textarea element does not adhere to the "height" attribute (the height attribute is not listed on W3C's site: http://www.w3schools.com/tags/tag_textarea.asp).

The textarea uses the attributes cols and rows to define it's size.

Next, to position the input buttons such that they are vertically-centered, you can apply the following CSS:

form.middleFloattextarea { vertical-align: middle; }
  form.middleFloatinput,
  form.middleFloattextarea {display: inline-block; }

Snippet created for reference.

form { margin: 10px0; }
      
      form.middleFloattextarea{
        vertical-align:  middle; 
        
      }
      form.middleFloatinput, form.middleFloattextarea {
        display: inline-block;
      }

<form><inputtype="text"placeholder="Form 1, input type=text"/><inputtype="button"value="Form 1"/><inputtype="button"value="It is centered"/></form><formclass="middleFloat"><textareacols="50"rows="5"placeholder="Form 2, textarea."></textarea><inputtype="button"value="Form 2"/><inputtype="button"value="Not centered"/></form>