zoukankan      html  css  js  c++  java
  • 屏幕水平居中垂直居中

    不管左边的盒子放大还是缩小,中间的盒子始终水平垂直居中

    html: 

      <div class="sidebar"><a href="###" class="click">点击缩小左侧导航宽度</a></div>
      <div class="notebar">
        <p>我始终在中间</p>
      </div>

    css:

      .sidebar a {
        color:#fff;
      }
      .sidebar {
        background:blue;
        210px;
        height:100%;
        position:fixed;
        top:0;
        left:0;
      }
      .notebar {
        200px;
        height:190px;
        text-align:center;
        background:red;
      }
      .notebar p {
        margin:20px 0 0;
      }

    js:

      $('.notebar').css('margin-left', ($(window).width() - $('.sidebar').width() - 200) / 2 + $('.sidebar').width());
      $('.notebar').css('margin-top', ($(window).height() - 190) / 2);

      $('.click').on("click", function() {
        $('.sidebar').css('width', 50);
        $('.notebar').css('margin-left', ($(window).width() - $('.sidebar').width() - 200) / 2 + $('.sidebar').width());
        $('.notebar').css('margin-top', ($(window).height() - 190) / 2);
      })

  • 相关阅读:
    PSP编程
    题库软件1.0发布
    ubuntu上安装netgear wg511v2驱动
    boost的编译
    Plot3D 0.3发布
    立体画板Plot3D
    求教团队内的朋友,在directx中,如何画虚线?
    OpenGL如何显示文本?
    JZ028数组中出现次数超过一半的数字
    JZ027字符串的排列
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6829357.html
Copyright © 2011-2022 走看看