zoukankan      html  css  js  c++  java
  • display:table-cell 居中及其使用

    一、例子:

    <html>
    <meta charset="utf8">
    <style>       
    .Absolute-Center { 
          display: table-cell;
           100px;  
          height: 100px; 
          border:1px solid red; 
          text-align:center;
          vertical-align:middle;
          }  
    </style>
    <body>
    <div class="Absolute-Center">
        <p>居中</p>
    </div>
    </body>
    </html>

    -----------------起作用

    <html>
    <meta charset="utf8">
    <style>
    .outer{
          300px;
          height:500px;
          border:1px solid red; 
          position:relative;
    }     
    .Absolute-Center { 
          display: table-cell;
          position:absolute;
          margin:auto;
          top:0px;
          bottom:0px;
          left:0px;
          right:0px;
           100px;  
          height: 100px; 
          border:1px solid red; 
          text-align:center;
          vertical-align:middle;
        } 
    </style>
    <body>
    <div class="outer">
    <div class="Absolute-Center">
        <p>居中</p>
    </div>
    </div>
    </body>
    </html>
    ---------------无效
    原因:

    position: absolute; display: table-cell; equals display: block; position: absolute;. 1#

    And vertical-align only applies to inline/table-cell elements.


    修改:
    <div class="outer">
      <div class="center">
        <div class="center-inner">
          <p>居中</p>
        </div>
      </div>
    </div>
    .outer{
          300px;
          height:500px;
          border:1px solid red; 
          position:relative;
    }     
    .center { 
          position: absolute;
          margin: auto;
          top:0px; bottom:0px; left:0px; right:0px;
           100px; height: 100px; 
          border:1px solid red; 
    }
    .center-inner {
      display: table;
      height: 100%;  100%;
    }
    .center p {
      display: table-cell;
      text-align:center; vertical-align:middle;
    } 
    
    

    二、table-cell的使用:http://www.zhangxinxu.com/

  • 相关阅读:
    HDU2519(组合数计算)
    CodeForces
    UVA 10976(暴力)
    UVA 11059(暴力)
    UVA725
    配置三层交换机DHCP
    通过三层交换机不同vlan之间通信
    AGC006C & CF1110E
    多项式全家桶
    一些模板(持续更新中)
  • 原文地址:https://www.cnblogs.com/fengxiaopiaoer/p/7525473.html
Copyright © 2011-2022 走看看