垂直居中

垂直居中是个老生常谈的问题，最常见的解决办法就是设置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;
}

　　

posted @ 2012-02-07 15:50  越己  阅读(275)  评论(0)    收藏  举报