Reputation: 107
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
Reputation: 125
Change your css to this:
.block label {
display: inline-block; width: 140px; text-align: right; vertical-align:top;
}
Upvotes: 1
Reputation: 1492
.block label {
display: inline-block; width: 140px; text-align: right; vertical-align:top;
}
Use vertical-align: top;
Upvotes: 1
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
Reputation: 16512
It's simply the vertical-align
property:
.block label {
display: inline-block;
width: 140px;
text-align: right;
vertical-align: top;
}
Upvotes: 4