马丁传奇

导航

使DIV相对窗口大小左右拖动始终水平居中 

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>使DIV相对窗口大小左右拖动始终水平居中</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />        
    <style type="text/css">
        body{
            margin:0px;            
        }
        #parentBox{
            /* 父盒子 */
            max-width:100%;
            min-height:400px;
            height:auto;      /*声明高度自适应*/     
            padding:50px 0px; /*内边距可以指定*/
            background:#ccc;
        }
        #centerDIV{
            /* 子层 */
            width:60%;        /*相对父DIV宽度比例*/
            height:auto;      /*声明高度自适应*/
            margin:0px auto;  /*水平居中*/
            background:yellow;
        }
    </style>
</head>
<body>
    <div id="parentBox">
        <div id="centerDIV">
            使DIV相对窗口大小拖动始终水平居中：<br />
            窗口左右（水平）拖动时，DIV层随窗口宽度变化而变化，始终水平居中。<br /><br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> 
            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> 
            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />           
            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />
        </div>
    </div>


</body>
</html>

 

posted on 2013-08-17 17:16  马丁传奇  阅读(825)  评论(0)    收藏  举报