研究一个经典的CSS问题:DIV垂直居中。结合网上的各种方法自己总结出了一个无hack完美的兼容IE6,7,FF的垂直解决方案.你可以看下面的图来理解第三种方法 预览效果
1.当div内容为单行时，众所周知将div的height和line-height设置成一个相同的值。
2.当div高度不固定时，将父div的padding-top和padding-bottom设置成一个相同的值使其自适应。
3.当div高度固定时，有两种情况：
(1)非IE浏览器中可用如下代码使其垂直居中
.box{ display:table-cell; vertical-align:middle;}
(2)IE中不支持上面的属性，所以下面就得用blueidea上的一个方法了,代码如下
.box{ position:relative; }
.inner{ position:absolute; top:50%; left:0;}
.innerbox{ position:relative; top:-50%; left:0;}
为了写一个通用的代码我们可以用IE的条件注释来引入IE的代码从而避免hack的使用,由次我总结出了如下代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>div vertical align</title>
<style type=”text/css”>
<!–
*{ margin:0; padding;0;}
body{ font:12px Verdana, Geneva, sans-serif; padding:10px;}
.box{ width:300px; height:300px; margin:0 auto; display:table-cell; vertical-align:middle;border:1px solid #96c2f1; background:#eff7ff;}
.inner{ width:170px; background:f0fbeb; border:1px solid #9bdf70; }
.innerbox{ width:150px; background:#fafcfd; border:1px solid #cceff5; padding:5px; }
–>
</style>
<!–[if IE]>
<style type=”text/css”>
.box{ position:relative; }
.inner{ position:absolute; top:50%; left:0;}
.innerbox{ position:relative; top:-50%; left:0;}
</style>
<![endif]–>
</head><body>
<div class=”box”>
<div class=”inner”>
<div class=”innerbox”>
这里可以是内容<br/>
这里可以是内容<br/>
这里可以是内容<br/>
这里可以是内容<br/>
这里可以是内容<br/>
这里可以是内容<br/>
</div>
</div>
</div>
</body>
</html>
居中个鬼哦，忽悠人家
正需要这个,研究一下,另外你的友情链接已经加上,并且邮箱也恢复正常,呵呵:)
嘿嘿!好的.共同学习ing………..
沙发~
哎!貌似只有你来坐我的沙发了……