zoukankan      html  css  js  c++  java
  • 未知宽高的容器设置居中、未知行数的文本设置居中

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
     .p_box{
      border: solid blue 1px;
    
       300px;
      height: 300px;
     }
     .box{
       20%;
      height: 20%;
      border: solid red 1px;
     }
     /*方案1-未知宽高的容器设置居中*/
    .p_measure1{
      position: relative;
    }
    .measure1{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
     /*方案2-未知宽高的容器设置居中*/
    .p_measure2{
      position: relative;
    }
    .measure2{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
     /*方案3-未知行数的文本设置居中*/
    .p_measure3{
      display: table;
    }
    .measure3{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    </style>
    </head>
    <body>
     <div class="p_box p_measure1">
       <div class="box measure1"></div>
     </div>
    
     <div class="p_box p_measure2">
       <div class="box measure2"></div>
     </div>
    
     <div class="p_box p_measure3">
       <div class="box measure3">
         这是一个未知行数的文本<br>
         ddd
       </div>
     </div>
    </body>
    </html>


  • 相关阅读:
    改造二叉树
    汽车加油行驶问题
    [SHOI2012]回家的路
    子串
    P3558 [POI2013]BAJ-Bytecomputer
    HDU
    UVALive
    ZOJ
    HDU
    牛客小白月赛2 题解
  • 原文地址:https://www.cnblogs.com/Zting00/p/7497677.html
Copyright © 2011-2022 走看看