HTML/CSS: Label & Input Forms Alignment

Question

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

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

sjagr · Accepted Answer · 2015-04-16 17:14:41Z

4

It's simply the vertical-align property:

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

answered Apr 16, 2015 at 17:14

sjagr

16.6k5 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A.J. Uppal · Accepted Answer · 2015-04-16 17:14:56Z

1

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>

answered Apr 16, 2015 at 17:14

A.J. Uppal

19.3k7 gold badges47 silver badges82 bronze badges

Comments

Mike · Accepted Answer · 2015-04-16 17:15:24Z

1

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

Use vertical-align: top;

answered Apr 16, 2015 at 17:15

Mike

1,50216 silver badges24 bronze badges

Comments

fcastillo · Accepted Answer · 2015-04-16 17:15:34Z

1

Add float:left; to your label tag: fiddle

answered Apr 16, 2015 at 17:15

fcastillo

9481 gold badge11 silver badges25 bronze badges

1 Comment

Ave Over a year ago

how can i also have a bit of gap between each labels?

friff14 · Accepted Answer · 2015-04-16 17:15:55Z

1

Change your css to this:

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

answered Apr 16, 2015 at 17:15

friff14

1256 bronze badges

Collectives™ on Stack Overflow

HTML/CSS: Label & Input Forms Alignment

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related