zoukankan      html  css  js  c++  java
  • DIV垂直/水平居中2(DIV宽度和高度是动态的)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>块元素DIV-垂直/水平居中(动态)</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    //当调整浏览器窗口的大小时,发生 resize 事件
    $(window).resize(function(){$(".mydiv").css({
    position:"absolute",
    left:($(window).width()-$(".mydiv").outerWidth())/2,
    top:($(window).height()-$(".mydiv").outerHeight())/2});
    });
    $(function(){
    $(window).resize();
    });
    });
    $(function(){//当页面刷新时,发生resize事件(可删除这三行程序,自己测试一下)
    $(window).resize();
    });
    </script>
    </head>
    <body>
    <div class="mydiv">呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
    </body>
    </html>
    提示:运行本段代码需要下载jQuery插件
    代码原理:通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同

  • 相关阅读:
    oracle常用hint的用法
    浅谈reverse函数与django哲学
    javascript console
    python os.path模块
    删除列表元素
    Python模块学习 pickle, cPickle 对象序列化/反序列化
    Python中zip()函数用法举例
    Python 字符串方法详解
    常用正则验证
    python中下划线的用法
  • 原文地址:https://www.cnblogs.com/yangAL/p/5386629.html
Copyright © 2011-2022 走看看