偶看新闻北京雷力集团:复选框或单选框与文字对齐的问题
来源：百度文库 编辑：偶看新闻 时间：2024/04/30 20:02:36
2008-12-24 22:29
作者补充话（2009年8月17日）：以下啰哩吧嗦的方法都不推荐的，仅供参考。
今天做页面美化时，发现复选框与文字（文字大小为12px时）不对齐，有点不舒服，得想办法解决，随着问题解决的深入我发现这可不是一个想象中简单的问题。待我慢慢叙来：
为什么不对齐？
第一次，line-height不顶用，各个浏览器均毫无反应，罢了；
第二次，input{margin-bottom:-3px;}IE下有用，firefox下没有反应，不可取；
第三次，input{height:13px;} IE下有用，居中了，可是firefox下，还是没有反应；
第四次，外部div使用vertical-align: middle；居然IE下有效，firefox下没有反应
晕，我有点服了，这个firefox，我决定看看国内的龙头网站是怎么搞的，记得雅虎首页有邮箱登陆，于是进入，结果（有点出乎意料）：
也是不对齐，怎么说呢，我只能说这是个难以解决的问题的办法吧，IE下是对齐的，
连前端一向很赞的雅虎都没有很好的解决firefox下的这个问题，所以让我觉得我下面这个方法还是相当可取的，而且个人觉得可以当一个模板来用。
文本框与文字的对齐
为什么不对齐？
另外一种方法：
为什么不对齐？
一旦将后面的文字设为block属性，则其与前面的inline属性的input肯定会显示在两行，不过没有关系，让文字标签的margin-top为负值，那么他又会跑到上面，与input在同一行，加上margin-left，于是文字就会在input之后：
单选框和复选框的大小是固定的，都是12px*12px，所以只要套用上面的数据值，各个地方都可以用，前提是外部有个div。
不过在opera下，效果不是很好，文字很上，原因是默认情况下文字与input就是文字偏上的，所以margin-top负值后就更加上了。可谓鱼和熊掌不可兼得啊，我也开始明白为什么雅虎首页放着单选框，复选框与文字不对齐这个问题不管的原因了。
其实做到上面那个程度，直接让input，span都是block属性都float：left，再在span之中控制文字高度即可。简单易用，可是两个inline元素都变成block，都资源占有和css渲染效率上来讲都是不可取的，最后，我是死心了，还是放着不管好，或是用上面第二、三。四的方法，让IE下正常就好了，毕竟中国大大部分网名都用的IE浏览器。——发现绕了一圈，做法跟雅虎页面上的一样了，唉，该死的a,b,c,d浏览器啊。
忙了会儿别的事，想到这个问题就不死心，于是有做了一下处理，对一些数据调试了一下，算是完成了对IE，firefox火狐浏览器，opera浏览器，谷歌浏览器都兼容的复选框与文字对齐的方法（个人不推荐，有些不划算）：
文本框与文字对齐
为什么不对齐？
或者是：
文本框与文字对齐
为什么不对齐？
写到最后说句总结性的话吧，还是vertical-align: middle的性价比最好啊，用这个吧。
补充于2009年10月22日：使用verticla-align:-3px;即可
作者补充话（2009年8月17日）：以下啰哩吧嗦的方法都不推荐的，仅供参考。
今天做页面美化时，发现复选框与文字（文字大小为12px时）不对齐，有点不舒服，得想办法解决，随着问题解决的深入我发现这可不是一个想象中简单的问题。待我慢慢叙来：
为什么不对齐？
第一次，line-height不顶用，各个浏览器均毫无反应，罢了；
第二次，input{margin-bottom:-3px;}IE下有用，firefox下没有反应，不可取；
第三次，input{height:13px;} IE下有用，居中了，可是firefox下，还是没有反应；
第四次，外部div使用vertical-align: middle；居然IE下有效，firefox下没有反应
晕，我有点服了，这个firefox，我决定看看国内的龙头网站是怎么搞的，记得雅虎首页有邮箱登陆，于是进入，结果（有点出乎意料）：
也是不对齐，怎么说呢，我只能说这是个难以解决的问题的办法吧，IE下是对齐的，
连前端一向很赞的雅虎都没有很好的解决firefox下的这个问题，所以让我觉得我下面这个方法还是相当可取的，而且个人觉得可以当一个模板来用。
为什么不对齐？
另外一种方法：
为什么不对齐？
一旦将后面的文字设为block属性，则其与前面的inline属性的input肯定会显示在两行，不过没有关系，让文字标签的margin-top为负值，那么他又会跑到上面，与input在同一行，加上margin-left，于是文字就会在input之后：
单选框和复选框的大小是固定的，都是12px*12px，所以只要套用上面的数据值，各个地方都可以用，前提是外部有个div。
不过在opera下，效果不是很好，文字很上，原因是默认情况下文字与input就是文字偏上的，所以margin-top负值后就更加上了。可谓鱼和熊掌不可兼得啊，我也开始明白为什么雅虎首页放着单选框，复选框与文字不对齐这个问题不管的原因了。
其实做到上面那个程度，直接让input，span都是block属性都float：left，再在span之中控制文字高度即可。简单易用，可是两个inline元素都变成block，都资源占有和css渲染效率上来讲都是不可取的，最后，我是死心了，还是放着不管好，或是用上面第二、三。四的方法，让IE下正常就好了，毕竟中国大大部分网名都用的IE浏览器。——发现绕了一圈，做法跟雅虎页面上的一样了，唉，该死的a,b,c,d浏览器啊。
忙了会儿别的事，想到这个问题就不死心，于是有做了一下处理，对一些数据调试了一下，算是完成了对IE，firefox火狐浏览器，opera浏览器，谷歌浏览器都兼容的复选框与文字对齐的方法（个人不推荐，有些不划算）：
为什么不对齐？
或者是：
为什么不对齐？
写到最后说句总结性的话吧，还是vertical-align: middle的性价比最好啊，用这个吧。
补充于2009年10月22日：使用verticla-align:-3px;即可
文字对齐问题(CSS)
vb动态生成复选框的问题
ASP用复选框删除的问题!
asp中复选框的问题
asp.net 复选框值的问题
网站的文字如何对齐？
JSP复选框问题??
怎样让文字与布局单元格的底线对齐——网页制作
怎样让文字与布局单元格的底线对齐——网页制作
javascript关于复选框判断及按钮提交的问题
photoshop中图章仿制选项框中，对齐此复选框有何作用？
用键盘如何完成复选框的复选？
打印机的对齐设置问题!
关于网页对齐的问题
文本字段对齐的问题
修改 单选框 复选框 下拉框 的样式
单选框、复选框、下拉框的CSS怎么写？
怎样设定网页内复选框和单选框的功能?
每行文字两端对齐
VB中mshflexgrid复选的问题
world表格内的文字为垂直居中对齐,水平方式为左对齐
ASP怎样实现中复选框的值与文本域的值相对应
怎样在WORD的表格里使框中的文字上下对齐？
在corelDRAW如何让一段美工文字的两端对齐?