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即左偏移量,右偏移量算法相同

  • 相关阅读:
    面试题:能谈谈Date、Datetime、Time、Timestamp、year的区别吗?
    面试题:对NotNull字段插入Null值 有啥现象?
    聊聊什么是慢查、如何监控?如何排查?
    谈谈MySQL的基数统计
    .vimrc
    HISKrrr的板子库
    CSP 模拟35
    晚测1
    CSP 模拟34
    nim板子题异或正确性YY
  • 原文地址:https://www.cnblogs.com/yangAL/p/5386629.html
Copyright © 2011-2022 走看看