code is as follows:  

<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "" >
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> Form elements perfect vertical center </title>
<Style type="text/CSS" >
* {padding: 0; Margin: 0; }
body {Tahoma font: 14 px/1.231, Geneva, sans-serif; Background - color: # D1D5E7; }
label {cursor: pointer; Vertical - align: middle; }
input {vertical - align: middle; Margin: 5 px; }
warp {margin: 100 px, 350 px; }
span {vertical - align: middle; The text - decoration: underline; }
img {vertical - align: middle; Border: 1 px solid # CCF; _margin - bottom: 1 px; P {}
the font - size: 14 px; }
the h2 {the font - size: 16 px; }
<Div class="warp" >
<H2 >Radio buttons and check boxes area is very small, not easy click, caused many users, and a poor user experience </h2 >
<P> Please look at the perfect solution: a coldness 】 【

perfect vertical center, click text optional, shortcut key is optional, the mouse on the words according to the shape of the hand (hint clickable) </p>
<The input name="aaa" id="aaa" type="checkbox" value=""/><The label for="aaa" >X× I am a perfect check box </label>

<Input name="CCC" id="CCC" type="checkbox" accesskey="2", "value=" "/><The label for="CCC" >I support keyboard Alt + 2 options (<span> 2 </span>) </label>

<The input name="BBB" id="BBB" type="radio" value=""/><The label for="BBB" >X× I am a perfect single box </label>

<The label for="FFF" >X× I was a perfect text box </label> <Input id="FFF" type="text"/>

<The input name="eee" id="eee" type="checkbox" value=""/><Span> Images can also be centered </span> <Img width="270" height="129" usemap="# mp" SRC=""/>

This concludes the body part