您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

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

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

 代码如下  

/* 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]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd2526.html
CSS隐藏文字的方法
飞天侠淘宝客程序“非法广告类型”错误修复补丁
图趣网微信
建议反馈
×