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

    一、窗体居中

    1
    positionabsolutetop0right0bottom0left0marginauto/*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决定大小】

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

    1
    2
    3
    4
    .nav { positionrelative;floatleft;width220 px;height45 px;cursorpointer;line - height45 px;text - align: center;vertical - align: middle;color#fff;font - size18 px;font - weight: 600; }
    .nav.nav - item { positionabsolute;top0;right0;bottom0;left0;marginauto;height25 px;line - height25 px;display: table - caption; }
        .nav span { positionrelative;top0;bottom0;height25 px;padding - left30 px;displayinline block; }
        .nav img { positionabsolute;top0;left0;width25 px;height25 px;z - index: 10 }

    简析:

      .nav:限制窗口大小;

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

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

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

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

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

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

    完美,只是因为简单。
     
    分类: css
    转载:http://www.cnblogs.com/jschar/p/6073085.html
  • 相关阅读:
    co coa ch ina
    提高英语听力最好的学习方法
    http://www.funnygames.us/search/?s=balance
    flash
    https://github.com/search?l=ObjectiveC&p=2&q=cocos&ref=searchbar&type=Repositories
    game.m https://github.com/kayrules/Cocos2dEndlessPlatformerGame
    2013年下半年学习计划
    Javascript判断数据类型
    vue组件自定义属性命名
    BZOJ 1018 线段树维护连通性
  • 原文地址:https://www.cnblogs.com/wang1593840378/p/6095515.html
Copyright © 2011-2022 走看看