码迷,mamicode.com
首页 > Web开发 > 详细

css中将div定位居中

时间:2014-05-29 11:37:58      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

        一直,我是认为定一个width,然后写一句margin:0 auto,就可以,但是有时也会不管用。

 

       例如当我要定一个宽度为700的div,用相对定位定在中间。任你怎么拉伸都是居中。

        

   看实例子

 

     

bubuko.com,布布扣
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<style>
.scroll{height:2000px;}
.main{width:100%;height:550px; background-color:#fe3a08; position:relative;}    
.cent{width:700px;color:#fff; font-size:46px; font-family:"幼圆"; position:absolute; left:50%; margin-left:-350px;line-height:500px;top:0px;}
</style>
<script>
function changeTop(obj, value) {
    var offsetTop = obj.offset().top + value;
    var scrollTop = $(window).scrollTop();
    console.log(offsetTop);
    console.log(scrollTop);
    var result = scrollTop - offsetTop ;
    if ((offsetTop < scrollTop) ) {
        obj.find(".bg-image").stop(true,true).animate({ "top": result }, 300);
    }
    if (offsetTop +550 < scrollTop) {
        obj.find(".bg-image").stop(true,true).animate({ "top": "0px" }, 300);
    }
}
$(function(){
    $(window).scroll(function () {
        changeTop($(".main"),80);
    })    
})

</script>
</head>

<body>
<div class="scroll">
    <div class="main">
        <div class="cent bg-image">
                R6 BRANCH OFFICE | 工程管理
        </div>
    </div>
</div>
</body>
</html>
bubuko.com,布布扣

 

css中将div定位居中,布布扣,bubuko.com

css中将div定位居中

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/wanliyuan/p/3756594.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!