单选按钮与文字如何对齐

单选按钮与文字如何对齐？




目前中文网站上面的文字，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。
考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。


解决方法:


以vertical-align:text-bottom为基础的
css代码如下：vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
以vertical-align:text-top为基础的
css代码如下：height:13px; vertical-align:text-top; margin-top:0;
以vertical-align:bottom为基础的
css代码如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
以vertical-align:middle为基础的

css代码如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;

eg:

<ul class="radioArea clearfix"><li class="Left"><input type="radio" name="liangfang"/><span>12小时内闪电联系</span></li><li class="Left"><input type="radio" name="liangfang"/><span>24小时内火速联系</span></li><li class="Left"><input type="radio" name="liangfang"/><span>48小时内全面沟通</span></li></ul>.userData .radioArea li input,.userData .radioArea li span{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}