Vertical Align text in a Label

HtmlCss

Html Problem Overview

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>

Html Solutions

Solution 1 - Html

You can use flexbox in 2018+:

.label-class {
    display: flex;
    align-items: center;
}

Browser support: https://caniuse.com/#search=flexbox

Solution 2 - Html

Vertical alignment only works with inline or inline-block elements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a block element.

The simplest solution in your case is to set the label to display: inline-block and add vertical-align: middle to the labels and the inputs. (You might find that the height of the text is such that vertical align won't make any difference anyway.)

Solution 3 - Html

Have you tried line-height? It won't solve your problems if there are multiple row labels, but it can be a quick solution.

Solution 4 - Html

The vertical-align style is used in table cells, so that won't do anything for you here.

To align the labels to the input boxes, you can use line-height:

line-height: 25px;

Solution 5 - Html

I had a similar problem and solved it wrapping the label into a div and setting the following styles:

<div style="display: table; vertical-align: middle">
  <label style="display: table-cell;" ... > ... </label>
</div>

Solution 6 - Html

This is what I usually do to "vertical align" text inside labels:

label {
   display: block;
   float: left;
   padding-top: 2px; /*This needs to be modified to fit */
}

It won't scale very nicely, but it works.

Solution 7 - Html

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.

Solution 8 - Html

label {
        padding: 10px 0;
        position: relative;
    }

Add some padding-top and padding-bottom instead of height.

Solution 9 - Html

Use css on your label.

For example:

label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}

Notice that the line-height will adjust the height of the line itself, whereas margin will dictate how far out other elements will be outside the lable and padding will dictate any inner space from the outside edge of the label. The margin and padding work like this (clockwise: Top Right Bottom Left), so 2px 5px 3px 5px is:

2px Top 5px Right 3px Bottom 5px Left

Solution 10 - Html

To do this you should alter the vertical-align property of the input.

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

Here is a more complete version. It has been tested in IE 8 and it works. see the difference by removing the vertical-align: middle from the input:

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

Solution 11 - Html

Adding disply:flex property to the label will get the job done!

Solution 12 - Html

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.

Solution 13 - Html

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%;
}

Solution 14 - Html

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.

Solution 15 - Html

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.

Solution 16 - Html

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>

Solution 17 - Html

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>

Solution 18 - Html

Lacking in elegance, pure html, no CSS solution:

<table>
   <tr>
      <td>
         <label></label>
      </td>
   </tr>
   <tr>
      <td>
         <input></input>
      </td>
   </tr>
</table>
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Evaluate Expressions in Switch Statements in C#

C#Switch Statement

Next Solution:

Is “Code Access Security” of any real world use?

.NetSecurityCode Access-Security

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIanView Question on Stackoverflow
Solution 1 - HtmlGerman KhokhlovView Answer on Stackoverflow
Solution 2 - HtmlDisgruntledGoatView Answer on Stackoverflow
Solution 3 - HtmlWabbitseasonView Answer on Stackoverflow
Solution 4 - HtmlGuffaView Answer on Stackoverflow
Solution 5 - HtmlPabloView Answer on Stackoverflow
Solution 6 - HtmlpeirixView Answer on Stackoverflow
Solution 7 - HtmlMike PaterasView Answer on Stackoverflow
Solution 8 - Htmluser7253564View Answer on Stackoverflow
Solution 9 - HtmlpsicloneView Answer on Stackoverflow
Solution 10 - HtmlRobert CabriView Answer on Stackoverflow
Solution 11 - HtmlSivadass NView Answer on Stackoverflow
Solution 12 - HtmlSpencer SullivanView Answer on Stackoverflow
Solution 13 - HtmlAashutosh TaikarView Answer on Stackoverflow
Solution 14 - HtmlBAL3NView Answer on Stackoverflow
Solution 15 - HtmlcollapsinghrungView Answer on Stackoverflow
Solution 16 - HtmlbobView Answer on Stackoverflow
Solution 17 - HtmlHemiacetalView Answer on Stackoverflow
Solution 18 - Htmltony gilView Answer on Stackoverflow