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

Posted on   |   In   |  

转载自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>