zoukankan      html  css  js  c++  java
  • 使一个div始终显示在页面中间

    使一个div始终显示在页面中间

    假设我们有一个div:<div id=”myDiv”></div>

    首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样:

    <style type=”text/css”>

           *{margin:0;padding:0;}

           #myDiv{400px;height:200px;margin:0 auto;}

    </style>

    这里的400px是你需要居中设置的div的宽度,200px是它的高,margin:0 auto;是控制水平居中的代码

     

     

    jquery代码应该是这样:

    <script type=”text/javascript”>

           $(function{

                         //获得当前浏览器的内部高(:不包含外边框和地址栏,工具栏的高)

                         var height = window.innerHeight;

                         //设置内容显示在中间

                         //这里的200是你要居中显示的div层的高,注意这里没有px

                         if(height> 200){

                                //设置要居中显示的div层的外边距

                                //myDiv是它的id

                                $("#myDiv").css("margin-top",(height-200)/2);

                         }

                         //设置当浏览器的大小改变时触发的事件

                         $(window).resize(function(){

                                //获得当前浏览器的高

                                varheight = window.innerHeight;

                                //设置内容显示在中间

                                if(height> 200){

                                       $("#myDiv").css("margin-top",(height-200)/2);

                                }

                         });

    });

    </script>

  • 相关阅读:
    集合总结(非常重要)
    day18_Map案例
    Map代码案例
    重踏学习Java路上_Day18(Map,Collections)
    TreeSet概述(源码和内部图 进行解析,包含练习案例)
    HashSet保证元素唯一性的代码体现(源码和内部图 进行解析)
    重踏学习Java路上_Day17(登录注册案例,Set集合,Collection集合总结,在集合中常见的数据结构)
    Java 泛型解析,太难了,认真读才能理解
    题解 【BZOJ4700】适者
    题解 楼房重建
  • 原文地址:https://www.cnblogs.com/superMay/p/4097434.html
Copyright © 2011-2022 走看看