垂直居中
垂直居中是个老生常谈的问题，最常见的解决办法就是设置line-height和height为相同的值，但是这个方法也不是处处适用，比如下面的例子：
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
span {
line-height:20px;
height:20px;
}
</style>
</head>
<body>
<span><input type="checkbox">text</span>
</body>
</html>
结果为：
很明显是底边对齐，不是垂直居中，其实这种问题还出现在input是图片的情况下，怎么办呢？
CSS还有一个属性：vertical-align，看名字似乎就是专门解决垂直对齐问题的，但这东西确实不好用。
这个属性只适合两种元素：表格的单元格 和 行内元素。这个属性最好别用在其他元素上，比如div，这会导致子行内元素继承这个属性。
知道这个有什么用？好像也没什么用，我知道了也不会用...
换个思路，不管是img还是input，我们可以把它抽象成一个 “和文本高度不匹配的东西”，要么比文本高度更高，要么更低。
如果这个东西是浮动的呢？还是刚才那个例子，如果CSS这样写：
input {
float: left;
margin: 0;
padding: 0;
}
这样span就完全属于文本了，于是我们再用 line-height 和 height 同值的办法，就可让文本居中，问题再次变成高度到底是多少呢？
这个值取决于浮动对象的高度，比如这里的input，每个浏览器的高度都是13px，于是CSS该这样写：
input {
float: left;
margin: 0;
padding: 0;
}
span {
height: 13px;
line-height: 13px;
}
别以为这样就完事了，IE这恶心的家伙貌似无视了margin和padding，我试着加了height，又好使了，神奇。。
input {
float: left;
margin: 0;
padding: 0;
height: 13px;
}
