<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<meta http-equiv= "Content-type" Content= "text/html; Charset=utf-8 "/>
<title> form elements perfectly vertically centered </title>
<style type=" Text/css "
*{padding:0; margin:0;}
body{font:14px/1.231 Tahoma, Geneva, Sans-serif; Background-color: #D1D5E7;}
Label{cursor:pointer; vertical-align:middle;}
Input{vertical-align:middle; margin:5px;}
. warp{margin:100px 350px;}
span{vertical-align:middle; text-decoration:underline;}
img{Vertical-align:middle; border:1px solid #CCF; _margin-bottom:1px;}
P{font-size:14px;}
H2{font-size:16px;}
</style>
<body>
<div class= "Warp"
<p> See "A cool" perfect solution:
Perfect Vertical Center, click Text Optional, shortcut key optional, mouse on the text display hand type (hint clickable) </P
<input name= "AAA" id= "AAA" type= "checkbox" value= ""/> <label-for= "AAA" >xx I'm perfect check box </label>
<input name= "CCC" id= "CCC" type= "checkbox" accesskey= "2" value= ""/> <label for= "CCC" > I support keyboard alt+2 selection (<span>2</span>) </label>
<input name= "BBB" id= "BBB" type= "Radio" value= "/><" " Label for= "BBB" >xx I am the perfect radio box </label>
<label for= "FFF" >xx I'm the perfect text box </label><input id= " FFF "type=" text/>
<input name= "eee" id= "eee" type= "checkbox" value= ""/><span> the picture can also be centered </span >
</div>