Vertical Align text in a Label

user_150239 0
Viewed 192364

I have been asked to vertically align the text in the labels for the fields in a form but I don't understand why they are not moving. I have tried putting in-line styles using vertical-align:top; and other attributes like bottom and middle but it doesn't work.

Any ideas? 

<dd>
   <label class="<?=$email_confirm_class;?>" 
          style="text-align:right; padding-right:3px">Confirm Email</label>
   <input class="text" type="text" 
          style="border:none;" name="email_confirm" 
          id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" 
          tabindex="4" /> 
   *
</dd>
css html
18 Answers
user_15388980

I came across this trying to add labels o some vertical radio boxes. I had to do this:

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br />
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br />
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

This gets them to display properly, where the label is centered on the radio button, though I had to increment the top padding with each line, as you can see. The code isn't pretty, but the result is.

user_1645060

None of these worked for me. I am using ASP.Net MVC with Bootstrap. I used the following successfully:

.label-middle { 
    padding-top:6px;
}

<label id="lblX" class="label-middle" ></label>

This vertically aligned the label with the textbox next to it.

user_32981560

If your label is in table, padding may cause it to expand. To avoid this you may use margin:

div label {
    display: block;
    text-align: left;
    margin-bottom: -0.2%;
}
user_80472660

You don't have to add any padding or edit the line-height!

Instead, just make sure that when you have an HTML like this :

<label><input type="checkbox" name=""><span>Checkbox Text</span></label>

Just make sure that the input height and width are the same, and the the text has the same font size.

Then, it will look perfectly fine and looks centered.

user_135075940

You have this:

<label class="styling_target">Label Text</label>
<input />

Do this instead:

<label>
  <span class="styling_target">Label Text</span>
  <input />
</label>

Styling a label doesn't really work, but you can have arbitrary HTML inside it, and you can style that.

user_710810

Force relative positions to provide top/bottom adjustments

.whatever {
    position: relative;
}

.whatever .input {
    position: relative;
}

.whatever span {
    position: relative;
    top: -2px; /* adjust this up or down */
}
<label class="whatever">
    <input type="checkbox"><span>my thing</span>
</label>

user_10888660

Just set the vertical-align property of the label to top.

label {
  vertical-align: top;
}
 <label for="desc">Description</label>
 <textarea name="desc" id="desc" cols="30" rows="10"></textarea>

user_126418670

Lacking in elegance, pure html, no CSS solution:

<table>
   <tr>
      <td>
         <label></label>
      </td>
   </tr>
   <tr>
      <td>
         <input></input>
      </td>
   </tr>
</table>
user_11667270
Related