2008-12-24 22:29
作者补充话（2009年8月17日）：以下啰哩吧嗦的方法都不推荐的，仅供参考。
今天做页面美化时，发现复选框与文字（文字大小为12px时）不对齐，有点不舒服，得想办法解决，随着问题解决的深入我发现这可不是一个想象中简单的问题。待我慢慢叙来：
<div class="align">
<input type="checkbox" />
<span>为什么不对齐？</span>
</div>
第一次，line-height不顶用，各个浏览器均毫无反应，罢了；
第二次，input{margin-bottom:-3px;}IE下有用，firefox下没有反应，不可取；
第三次，input{height:13px;} IE下有用，居中了，可是firefox下，还是没有反应；
第四次，外部div使用vertical-align: middle；居然IE下有效，firefox下没有反应
晕，我有点服了，这个firefox，我决定看看国内的龙头网站是怎么搞的，记得雅虎首页有邮箱登陆，于是进入，结果（有点出乎意料）：
也是不对齐，怎么说呢，我只能说这是个难以解决的问题的办法吧，IE下是对齐的，
连前端一向很赞的雅虎都没有很好的解决firefox下的这个问题，所以让我觉得我下面这个方法还是相当可取的，而且个人觉得可以当一个模板来用。
<title>文本框与文字的对齐</title>
</head>
<style type="text/css">
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align span{ display:block; float:left; padding-top:3px; *padding-top:5px;}
</style>
<body>
<div class="align">
<input type="checkbox" />
<span>为什么不对齐？</span>
</div>
</body>
另外一种方法：
<style type="text/css">
.align{font-size:12px;}
.align input{display:block;} /*如果只针对IE和火狐浏览器，这句话可以省掉*/
.align span{display:block; margin-left:22px!important; margin-left:11px; margin-top:-16px; float:left;}</style>
</head>
<body>
<div class="align">
<input type="checkbox" />
<span>为什么不对齐？</span>
</div>
</body>
一旦将后面的文字设为block属性，则其与前面的inline属性的input肯定会显示在两行，不过没有关系，让文字<span>标签的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浏览器，谷歌浏览器都兼容的复选框与文字对齐的方法（个人不推荐，有些不划算）：
<title>文本框与文字对齐</title>
<style type="text/css">
.align{font-size:12px;}
.align input{display:block;}
.align span{display:block; margin-left:22px!important; margin-left:11px; margin-top:-16px; float:left; height:16px; line-height:14px;}
</style>
<body>
<div class="align">
<input type="checkbox" />
<span>为什么不对齐？</span>
</div>
</body>
或者是：
<title>文本框与文字对齐</title>
<style type="text/css">
.align2{font-size:12px;}
.align2 input{display:block; float:left; margin-right:4px;}
.align2 span{display:block; float:left; height:20px; line-height:20px; *line-height:22px;}
</style>
<body>
<div class="align2">
<input type="checkbox" />
<span>为什么不对齐？</span>
</div>
</body>
写到最后说句总结性的话吧，还是vertical-align: middle的性价比最好啊，用这个吧。
补充于2009年10月22日：使用verticla-align:-3px;即可
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
