How to vertically align a html radio button to it's label?

ninjacoder picture ninjacoder · Nov 22, 2012 · Viewed 168.7k times · Source

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

The radio buttons.

How can I vertically align the radio buttons 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 the css code:

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

Answer

zakangelle picture zakangelle · Feb 7, 2013

Try this:

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