zoukankan      html  css  js  c++  java
  • 自适应居中

    一、窗体居中

    position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px;  165px; */ 

    简析:

      position:固定位置显示(absolute|fixed);

        【absolute:窗口大小由上层position为absolute、fixed、relative的子父关系窗口决定;fixed:窗口大小由上层层position为fixed的子父关系窗口决定】

      top,right,bottom,left:设置偏移量(<value>|auto);

        【设置为auto时,表示窗口在该方向不居中显示;如:left:auto,则窗口在水平位置不居中显示】

      margin:自适应布局(auto);

        【窗口只会在都为auto的方向上居中】

      height,widht:可设置,也可不设置(<value>|auto);

        【不设置则由top,right,bottom,left决定大小】

    二、文字、图片混合自适应居中

    .nav { position: relative;float: left; 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;vertical - align: middle;color: #fff;font - size: 18 px;font - weight: 600; }
    .nav.nav - item { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;height: 25 px;line - height: 25 px;display: table - caption; }
        .nav span { position: relative;top: 0;bottom: 0;height: 25 px;padding - left: 30 px;display: inline - block; }
        .nav img { position: absolute;top: 0;left: 0; 25 px;height: 25 px;z - index: 10 }
    

    简析:

      .nav:限制窗口大小;

        【text-align:限制span水平居中】

      .nav-item:控制内容垂直居中;

        【display:限制内容并排显示】

      .nav span:限制图片显示范围;

        【padding-left:为图片留下显示空间;display:适应显示】

      .nav img:限制图片大小与显示位置;

    完美,只是因为简单。
  • 相关阅读:
    【次大gcd】#uoj #48. 【UR #3】核聚变反应强度
    1591:数字计数
    数位DP模板
    1588:数字游戏
    [NOIP 2017普及组 No.1] 成绩
    [NOIP 2017普及组 No.3] 棋盘
    Apache(httpd)实现反向代理
    注册阿里云域名
    SSH常用命令
    Linux yum 安装Java和MySQL
  • 原文地址:https://www.cnblogs.com/jschar/p/6073085.html
Copyright © 2011-2022 走看看