关于单复选框与文字对齐的小总结

      最近网站改版，多次碰到了单选框和复选框与文字对不齐的问题，颇为纠结。遂网上胡乱百度一起，很多热心人提出了各种各样的解决方案。于是乎一顿狂喜的搬进来，可是效果却不见想象中的好，究其原因，发现一些考虑不是很全面，可能是清零代码各不一样所致。没办法，自己开始双眼通红的开始熬。最终还是让我总结出来几个狗血的办法，大家别见笑。

      PS，英文和14号字的中文对齐是良好的，不需要另外加样式。但可怜我们的网站是以12号中文为王，于是我们的悲剧出现了。

      第一：不管他

      呵呵，千万别喷饭，这么做的可不止一家网站，雅虎、新浪、淘宝都有这样，原因是可以节省代码。说实话，如果你换个心情去看它，会发现没对很齐不是什么大不了的事情，不影响阅读。当然，作为专业人士，我们自己还是要知道自己可以把这个问题搞定才行。

      第二：单复选框margin值清零，单复选框加上vertical-align:middle; margin-top:-2px; margin-bottom:1px;样式。这种方式在各个浏览器中都还过得去，至少我现在还没发现什么问题。代码也增加得不多，值得推荐。

      第三，人人网上采用了单复选框margin不清零，vertical-align:middle;margin-top:-3px;的方法，可以缓和一下，但是貌似它现在也没用了。

      第四：这是个比较极品的方法，学的别人的，但那位高手是谁我却想不起来了。他觉得既然是中文字体的对齐方式在作祟，干脆就把字体设为英文，但是显示还是照样是中文。

      单复选框margin值清零，vertical-align:middle，后面的文字用label或span标签包将起来，设置字体为tahome一类的英文字体，vertical-align:middle。说实话，这个方法的结果并不比第二种优秀，代码用得更多，在这里提出来主要是想向这位仁兄表示敬意，他的创造力非凡。

      此外，还有其他一些方法，例如vertical-align基于baseline的，top的，bottom的，但是这些或多或少表现得有些问题，在这里就不推荐了。网上还有仁兄提出用浮动对齐的方式，这个方法懂一点CSS的都会想到，但是懂两点CSS的就不会用它，原因很简单：太麻烦，何必呢。