Home » Html » Vertical Align text in a Label

Vertical Align text in a Label

Posted by: admin November 29, 2017 Leave a comment

Questions:

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>
Answers:

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.)

Questions:
Answers:

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

Questions:
Answers:

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;

Questions:
Answers:

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.

Questions:
Answers:

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>

Questions:
Answers:

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.

Questions:
Answers:

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>

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

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

Questions:
Answers:

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

Questions:
Answers:

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