zoukankan      html  css  js  c++  java
  • 盒模型中的div居中

    说到居中的问题,或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确,这些属性在某种程序上可以达到居中的效果。但是否是适用于每一种情况呢?我们先来温习一下这些个属性值的用处。
        text-align:center;                    行内元素的水平居中显示;
        margin:0 auto;                       固宽盒子在浏览器中的居中显示效果;
        vertical-align:middle;             行内元素的垂直居中显示;
        line-height:height;                 针对于单行文字垂直居中显示;

    ====================================

    HTML:

    <div class="A">
         <div class="B">测试</div>
    </div>

    ----------------------------------

    CSS:

    第一种方法:(常用)
    .A{ position: relative; height:500px; 500px; background-color:#FF0000;}
    .B{ position: absolute; top:50%; left:50%;height:250px; 250px; background-color:#FFF; margin:-125px 0 0 -125px; }


    第二种方法:
    .A{ position: relative; height:500px; 500px; background-color:#FF0000; overflow:hidden;}
    .B{ position: relative; height:250px; 250px; background-color:#FFF; margin:-125px auto 0; top:250px;}


    第三种方法:(IE有点问题)
    .A{ position: relative; height:500px; 500px; background-color:#FF0000; }
    .B{ position: absolute; height:250px; 250px; background-color:#FFF; margin:auto; top:0; left:0; bottom:0;  right:0;}


    第四种方法:(用到CSS3,不考虑IE,只在火狐做了测试,其他可加前缀)
    .A{position:relative; height:500px; 500px; background-color:#FF0000;display:-moz-box; -moz-box-pack: center; -moz-box-align:center;}
    .B{height:250px; 250px; background-color:#FFF;}

    第五种方法:(IE6/7兼容)
    .A{ display:table-cell;height:500px;500px;background-color:#FF0000;vertical-align: middle;text-align: center;
    *font-size:438.6px;/*font-size的值为该父元素的高度除以1.14得到的值,即500/1010=438.6*/}
    .B{ display:inline-block;height:250px; 250px; background-color:#FFF; 
    *display:inline; *zoom:1;/*ie6/7实现inline-block*/
    *vertical-align: middle;
    font-size:12px;/*恢复正常字体大小*/
    }

  • 相关阅读:
    [haoi2015]T1
    [haoi2014]走出金字塔
    [haoi2014]穿越封锁线
    [haoi2014]遥感监测
    [haoi2012]高速公路
    [haoi2012]容易题
    [haoi2008]排名系统
    【bzoj1014】[JSOI2008]火星人prefix
    0916解题报告
    生成树计数问题
  • 原文地址:https://www.cnblogs.com/leejersey/p/3579349.html
Copyright © 2011-2022 走看看