当前位置：图趣网（Tuquu） > 网页设计教程 > 移动前端 > css中不确定高度垂直居中2种方法

css中不确定高度垂直居中2种方法

2014/10/29 10:23:17来源：互联网

不确定高度垂直居中
实例一：

 代码如下  

/* 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>

 
[教程作者：admin]
关键词：css 前端开发 垂直居中 高居中 css代码
分享到0
免责声明：本站文章系图趣网整理发布，如需转载，请注明出处，素材资料仅供个人学习与参考，请勿用于商业用途！
本文地址：http://tuquu.com/tutorial/wd2526.html
上一篇:CSS隐藏文字的方法
下一篇:飞天侠淘宝客程序“非法广告类型”错误修复补丁

您可能还喜欢

网页教程分类

最热门的教程
CSS隐藏文字的方法
飞天侠淘宝客程序“非法广告类型”错误修复补丁
图趣网微信
建议反馈
×