css中不确定高度垂直居中2种方法
更新时间:2014-10-21 10:40 作者:佚名点击:
|
例子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="http://www.w3.org/1999/xhtml">
< 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>
|
|
------分隔线----------------------------
