點擊這里給我發消息 010-82967418
當前位置:網站建設>網絡知識
網站制作之未知高度如何用DIV做垂直居中
點擊量:3533 發布時間: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  
[email protected]  
www.dpoegd.live www.xinyisheji.com  
北京市海淀區西三旗上奧世紀中心B-8層  
QQ在線咨詢
  • 點擊這里給我發消息
  • 點擊這里給我發消息
  • 點擊這里給我發消息
售后咨詢熱線
點擊這里給我發消息
010-82967418
新疆十一选五开奖走势图