例子1
不確定高度垂直居中
代碼如下:
/* center < */
.vetically {
vertical-align: middle;
display: table-cell;
*position: relative;
}
.vetically_c {
display: block;
margin: 0 auto;
text-align: center;
*position: absolute;
*top: 50%;
*left: 50%;
*margin-top: expression(-(this.height ) / 2);
*margin-left: expression(-(this.width ) / 2);
}
/* center > */
例子2
標準瀏覽器的情況還是和上面一樣，不同的是針對ie6/ie7利用在img標簽的前面插入一對空標簽的辦法。
代碼如下:
<html xmlns=>
<head>
<meta http-equiv=content-type content=text/html; charset=gb2312 />
<title>方法2 - 未知高度的圖片垂直居中</title>
<style type=text/css>
body {
height:100%;
}
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if ie]>
<style type=text/css>?
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->
</head>
<body>
<div id=box>
<i></i><img src=images/demo_zl.png alt= />
</div>
</body>
</html>