CODEWITHSUNDEEP
htmlcss
Ave
Ave

Reputation: 107

HTML/CSS: Label & Input Forms Alignment

How I could align my "message" text to the top because right now it's placed at the bottom.

demo: https://jsfiddle.net/WX58z/1096/

<div class="block">
   <label>Message</label>
   <textarea name="Message" rows="4" id="Message" style="width:300px;"> 
   </textarea>
</div>

Upvotes: 0

Views: 802

Answers (5)

friff14
friff14

Reputation: 125

Change your css to this:

.block label {
     display: inline-block; width: 140px; text-align: right; vertical-align:top;
}

Upvotes: 1

fcastillo
fcastillo

Reputation: 948

Add float:left; to your label tag: fiddle

Upvotes: 1

Mike
Mike

Reputation: 1492

.block label {
     display: inline-block; width: 140px; text-align: right; vertical-align:top;
}

Use vertical-align: top;

Upvotes: 1

A.J. Uppal
A.J. Uppal

Reputation: 19284

Use the vertical-align property to change the alignment of the text:

.block label {
     display: inline-block; 
     width: 140px; 
     text-align: right; 
     vertical-align: top; /*HERE*/
}
<div class="block">
    <label>Name</label>
    <input type="Name" />
</div>
<div class="block">
    <label>Phone Number</label>
    <input type="text" />
</div>
<div class="block">
    <label>Email</label>
    <input type="text" />
</div>
<div class="block">
    <label>Message</label>
<textarea name="Message" rows="4" id="Message2" style="width:300px;"></textarea>
</div>

Upvotes: 1

sjagr
sjagr

Reputation: 16512

It's simply the vertical-align property:

.block label {
    display: inline-block;
    width: 140px;
    text-align: right;
    vertical-align: top;
}

Upvotes: 4

Related Questions