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;
}
Try this:
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}