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);
      })

  • 相关阅读:
    再谈Dilworth定理
    区间动态规划
    单调队列优化动态规划
    暑假集训考试R2 konomi 慕
    NOIP 2000 计算器的改良
    2007 Simulation message
    COCI 2003 LIFTOVI 电梯 SPFA
    NOIP 2003 数字游戏
    USACO 2014 DEC Guard Mark 状态压缩
    使用HttpClient发送GET请求
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6829357.html
Copyright © 2011-2022 走看看