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:

 
CSS
    

HTML

Radio buttons and their Labels alignment

Following HTML code will align radio buttons to their labels:

CSS

HTML 

None

Hope that helps!