010-82967418
当前位置:网站建设>网络知识
网站制作之未知高度如何用DIV做垂直居中
点击量:3308 发布时间:2011-4-10 17:15:33

 网站制作中经常遇到一些问题,对于网站制作来说是一个考验,没办法选择了这一行不仅仅只要经验还要不断学习解决问题。在上一个项目中我遇到了一个问题,高度未知,如何用DIV来做文字垂直居中?如果您也遇到了同样的网站制作问题,不妨参考一下我们的做法。文章由新翼北京网站建设,北京网站制作,北京网页设计编辑整理,您有什么网站制作上的问题欢迎您随时咨询。电话:010-82967418

    
<style type="text/css">
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */
div.greenBorder {border: 1px solid green; background-color: #FFF;}
p{margin: 1em;}
 </style>
<script type="text/javascript">
// <![CDATA[

function toggleContent(name,n) {
 var i,t='',el = document.getElementById(name);
 if (!el.origCont) el.origCont = el.innerHTML;
 
 for (i=0;i<n;i++) t += el.origCont;
 el.innerHTML = t;
 }

// ]]>
</script>
</head>
<body>
<div id="outer">
  <div id="middle">
    <div id="inner" class="greenBorder">
      <p><a href="javascript:toggleContent('inner',1)">默认长度</a>  <a href="javascript:toggleContent('inner',2)">加长页面</a></p>
      <p> 1.打开illustrator,新建一个文件,画个矩形,比你要导入的图片大一些,白色填充。 <br />
        2.选中矩形,菜单:Effect > Distort & Transform > Zig Zag,设置如下图。 <br />
        3.菜单:Effect > Stylize > Drop Shadow,设置如下图。 <br />
        1.打开illustrator,新建一个文件,画个矩形,比你要导入的图片大一些,白色填充。 <br />
        2.选中矩形,菜单:Effect > Distort & Transform > Zig Zag,设置如下图。 <br />
        3.菜单:Effect > Stylize > Drop Shadow,设置如下图。</p>
          </div>
  </div>
</div>

Copyright2006-2013 xinyisheji.com
新翼设计出品-北京网站建设,北京网站设计,北京网站制作,我们值得信赖. 京 ICP备:10043999
htm网站地图 | xml网站地图 | 网站统计
+86-010-82967418 52431618  
xinyidesign@126.com  
www. www.xinyisheji.com  
北京市海淀区西三旗上奥世纪中心B-8层  
售后咨询热线
010-82967418