How to vertically align an html shortcut on it?

Question

I have a form with radio buttons that are on the same line as their labels. The radio buttons, however, are not vertically aligned with their labels, as shown in the screenshot below.

How can vertically align switches with their labels?

Edit:

Here's the html code:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/> <label for="rd1">radio 1</label><br/> <input type="radio" name="user_level" id="rd2" value="2"/> <label for="rd2">radio 2</label><br/> <input type="radio" name="user_level" id="rd3" value="3"/> <label for="rd3">radio 3</label><br/> 

And css code:

 label{ padding:5px; color:#222; font-family:corbel,sans-serif; font-size: 14px; margin: 10px; } 

Answer 1

Try the following:

 input[type="radio"] { margin-top: -1px; vertical-align: middle; } 

Answer 2

I know I chose anwer menuka devinda, but looking at the comments below, I agreed and tried to find a better solution. I managed to come up with this and, in my opinion, this is a much more elegant solution:

 input[type='radio'], label{ vertical-align: baseline; padding: 10px; margin: 10px; } 

Thanks to everyone who suggested the answer, your answer did not go unnoticed. If you have other ideas, you can add your own answer to this question.

Answer 3

 input { display: table-cell; vertical-align: middle } 

Place a class for all radio stations. This will work for all radio buttons on the html page.

Fiddle

Answer 4

try adding vertical-align:top to css

 label{ padding:5px; color:#222; font-family:corbel,sans-serif; font-size: 14px; margin: 10px; vertical-align:top; }​ 

Test: http://jsfiddle.net/muthkum/heAWP/

Answer 5

You can do the following:

 input { vertical-align:middle; } label{ color:#222; font-family:corbel,sans-serif; font-size: 14px; } 

Demo

Answer 6

You can also add a little flexibility to the answers.

 .Radio { display: inline-flex; align-items: center; } .Radio--large { font-size: 2rem; } .Radio-Input { margin-right: 0.5rem; } 

 <div> <label class="Radio" for="sex-female"> <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" /> Female </label> <label class="Radio" for="sex-male"> <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" /> Male </label> </div> <div> <label class="Radio Radio--large" for="sex-female2"> <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" /> Female </label> <label class="Radio Radio--large" for="sex-male2"> <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" /> Male </label> </div> 

Answer 7

Something like this should work

CSS

 input { float: left; clear: left; width: 50px; line-height: 20px; } label { float: left; vertical-align: middle; } 

Answer 8

 label, input { vertical-align: middle; } 

I just align the vertical middle of the fields with the base of the source field plus half the x-height (en.wikipedia.org/wiki/X-height) of the parent.

Answer 9

Many of these answers say use vertical-align: middle; which closes the alignment, but for me it's still off a few pixels. The method I used to get a true 1 - 1 correspondence between tags and radio inputs is vertical-align: top; :

 label, label>input{ font-size: 20px; display: inline-block; margin: 0; line-height: 28px; height: 28px; vertical-align: top; } 

 <h1>How are you?</h1> <fieldset> <legend>Your response:</legend> <label for="radChoiceGood"> <input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good </label> <label for="radChoiceExcellent"> <input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent </label> <label for="radChoiceOk"> <input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK </label> </fieldset> 

Answer 10

Adding display:inline-block to labels and giving them a padding-top fix this, I think. In addition, just setting the line-height on the labels will also be.

Answer 11

As long as I agree, tables should not be used for design layouts, contrary to popular belief, they are being tested. those. table tag is not out of date. The best way to align radio buttons is to use a vertical alignment medium CSS with margins adjusted on the input elements.

Answer 12

I like to put input in labels (added bonus: now you don't need the for attribute on the label) and put vertical-align: middle on the input.

 label > input[type=radio] { vertical-align: middle; margin-top: -2px; } #d2 { font-size: 30px; } 

 <div> <label><input type="radio" name="radio" value="1">Good</label> <label><input type="radio" name="radio" value="2">Excellent</label> <div> <br> <div id="d2"> <label><input type="radio" name="radio2" value="1">Good</label> <label><input type="radio" name="radio2" value="2">Excellent</label> <div> 

( -2px margin-top is a matter of taste.)

Another option that I really like is to use a table. (Hold the pitch forks! It's very nice!) That means you need to add the for attribute to all of your labels and the id to your inputs. I would recommend this option for labels with long text content over several lines.

 <table><tr><td> <input id="radioOption" name="radioOption" type="radio" /> </td><td> <label for="radioOption"> Really good option </label> </td></tr></table> 

Answer 13

There are several ways, one of which I would prefer to use a table in html. you can add two tables of three columns and place switches and layout.

 <table border="0"> <tr> <td><input type="radio" name="sex" value="1"></td> <td>radio1</td> </tr> <tr> <td><input type="radio" name="sex" value="2"></td> <td>radio2</td> </tr> </table>