尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    div控制块级元素的垂直居中案例分享

    作者:redroom  来源:redroom  发表时间:2009-8-16 11:29:05  点击:4089

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>块级元素的垂直居中</title>
    <style>
    * {
     margin:0;
     padding:0;
    }
    body {
     padding:50px;
    }
    pre {
     padding:8px;
     border:1px solid #ccc;
     background:#f2f2f2;
     font:11px/150% 'courier new', arial;
    }
    p {
     line-height:180%;
    }
    ul {
     list-style:none;
    }
    #wrapper {
     border:1px solid #ccc;
     width:400px;
     height:200px;
     text-align:center;
     line-height:200px;
     _font-size:120px;
    }
    #wrapper a {
     display:-moz-inline-block;
     display:inline-block;
     /* zoom:1; */
     margin:0 auto;
     width:80px;
     height:20px;
     font:11px/20px arial;
     background:red;
    }
    </style>
    </head>
    <body>
    <h2 id="main">块级元素的垂直居中</h2>
    <br />
    <div id="wrapper"> <a href="">BTN</a> </div>
    <br />
    <pre>
    #wrapper {
     border:1px solid #ccc;
     width:400px;
     height:200px;
     <span style="color:red;">text-align:center;</span>
     <span style="color:red;">line-height:200px;</span>  <span style="color:gray">// Vertical Align For IE7 & Firefox</span>
     <span style="color:green;">_font-size:120px;</span>  <span style="color:gray">// Vertical Align For IE6</span>
    }
    #wrapper a {
     <span style="color:blue;">display:-moz-inline-block;</span>  <span style="color:gray">// For Firefox 2(-)</span>
     <span style="color:red;">display:inline-block;</span>  <span style="color:gray">// For Firefox 3 & IE6, 对于IE6来说其实相当于zoom:1, 仅仅是给elem一个layout。</span>
           <span style="color:gray">// 注意:支持display:inline-block的浏览器有:Firefox3,Safari,Opera</span>
     <span style="color:blue;">margin:0 auto;</span>  <span style="color:gray">// For Firefox 2(-)</span>
     width:80px;
     height:20px;
     font:11px/20px arial;
     background:red;
    }
    </pre>
    </body>
    </html>

    代码部分:

    #wrapper {
    border:1px solid #ccc;
    width:400px;
    height:200px;
    text-align:center;
    line-height:200px;  // Vertical Align For IE7 & Firefox
    _font-size:120px;  // Vertical Align For IE6
    }
    #wrapper a {
    display:-moz-inline-block;  // For Firefox 2(-)
    display:inline-block;  // For Firefox 3 & IE6, 对于IE6来说其实相当于zoom:1, 仅仅是给elem一个layout。
        // 注意:支持display:inline-block的浏览器有:Firefox3,Safari,Opera
    margin:0 auto;  // For Firefox 2(-)
    width:80px;
    height:20px;
    font:11px/20px arial;
    background:red;
    }

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗