css文字和表单元素垂直对齐

转载自DDD的boke
http://liuxiaofan.com

##问题
一个网站会涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的 情况下,是无法对齐的,而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle,也依然不能完美对齐。

解决办法:

  • 文字大小必须是偶数,比如12PX。
  • 将文字加上label标签并且也添加vertical-align:middle样式。
  • 然后去除表单元素的边距。



    <input class="inputcheckbox" name="test" value="1" type="checkbox">
    <label>测试文字x</label>