Vertical Align text in a Label

Question

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

Answer 1

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

Answer 2

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;

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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