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

Question

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.

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 1

Try this:

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

Answer 2

I know I'd selected the anwer by menuka devinda but looking at the comments below it I concurred and tried to come up with a better solution. I managed to come up with this and in my opinion it's a much more elegant solution:

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

Thanks to everyone who offered an answer, your answer didn't go unnoticed. If you still got any other ideas feel free to add your own answer to this question.