CODEWITHSUNDEEP
htmlcss
Toskan
Toskan

Reputation: 14931

Align label next to textarea field, centered? pure css solution

So I got this snippet: (this is the jsfiddle)

<div><label style="height: 58px;">Label</label>
    <textarea>11111</textarea>
</div>

<br/>
<br/>
<br/>
<br/>

<div><label style="height: 158px;">Label</label>
    <textarea style="height:199px">11111</textarea>
</div>

this is the css

label{
    display:inline-block;
    background-color: grey;
}

This is the sad result:

enter image description here

I want the label to be in the center of the textarea field. Someone got a clue what is going on here?

Upvotes: 2

Views: 1970

Answers (2)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Check this jsFiddle

Use vertical-align CSS property to set middle value to solve this problem.

HTML

<div>
    <label>Label</label>
    <textarea>11111</textarea>
</div>

<br/>
<br/>
<br/>
<br/>

<div>
    <label>Label</label>
    <textarea style="height:199px;">11111</textarea>
</div>

CSS

textarea{
    vertical-align: middle;
}

Upvotes: 2

Raul Rene
Raul Rene

Reputation: 10270

You have to set the vertical-align: middle property for the textarea (or for any element for which you want to specify a label - e.g. works for multiple select as well).

Working fiddle here

Upvotes: 5

Related Questions