html - How to vertically align radio buttons with text on the same line? -

i wrote html below display 2 radio buttons , text.

<input id="radio1"  type="radio"   checked="checked"/>create application name <br/> <input id="radio2"  type="radio"/> create  source name 

my issue radio buttons , text not aligning properly. radio buttons displaying little bit below text. how align radio buttons , text on same line proper alignment?

demo

vertical-align: middle:

aligns vertical midpoint of box baseline of parent box plus half x-height of parent.

the problem seems caused fact browsers commonly add random uneven margins radio buttons , checkboxes.

use inline style, weird true:

<input type="radio" style="vertical-align: middle; margin: 0px;"> label     <br/>     <br/>     <input type="radio" style="vertical-align: middle; margin: 0px;"> label         <br/>         <br/>         <input type="radio" style="vertical-align: middle; margin: 0px;"> label 

edit

this short explanation gavin kistner, useful. tried out final suggestion on page, seems render respectably in chrome, ie, firefox, opera, , safari.

what did add td{ line-height:1.5em }