How to align checkboxes/radio buttons and their labels

This is one of the minor CSS problems that we face on every other web project. Checkboxes and radio button labels are not aligned. This can easily be avoided by setting vertical-align of checkbox or radio button.

Just define a class and add it to the checkboxes/radio buttons. This will correctly align them with the labels and also add some margin between the label and the checkbox/radion button but start with a 0 margin and padding for all elements like this:

*{
margin:0; 
padding:0;
}
.chk-box{	
vertical-align: middle; 
margin-right:5px; 
}

Checkboxes and their Labels alignment

Following HTML code will align checkboxes to their labels:

<input type="checkbox" name="tags[]" value="CSS" class="chk-box"/> 
<label >CSS</label><br />    
<input type="checkbox" name="tags[]" value="HTML"  class="chk-box"/>
<label >HTML</label>

Radio buttons and their Labels alignment

Following HTML code will align radio buttons to their labels:

<input type="radio" name="skill" value="CSS"  class="chk-box" />
<label >CSS</label>
<input type="radio" name="skill" value="HTML"  class="chk-box" />
<label >HTML</label> 
<input type="radio" name="skill" value="None"  class="chk-box"/>
<label >None</label>

Hope that helps!

Related posts:

1. How to show/hide divs based on radio button selection using jQuery
2. How to Enable/Disable MovieClips as Buttons in Flash with ActionScript 3.0
3. Adding & Customizing Back Buttons in jQuery Mobile Framework
4. [AS3] Dynamically changing frame rate playback of Flash Movie to play flv video at different speeds
5. [AS3] Load External swf into Main Flash Movie with Play, Pause, Forward, Rewind, Load and Unload Buttons