zoukankan      html  css  js  c++  java
  • css未知宽度水平居中整理

    1、text-align

    兼容性很好

    .wp {text-align: center;}
    .test {display: inline;}
    <ul class="wp">
        <li class="test">1</li>
        <li class="test">2</li>
        <li class="test">3</li>
        <li class="test">4</li>
        <li class="test">5</li>
    </ul>

    2、float+relative

    兼容性很好

    .wp {position:relative; left:50%; float:left;}
    .test {position:relative; right:50%; z-index:2; float:left}
    <ul class="wp">
        <li class="test">1</li>
        <li class="test">2</li>
        <li class="test">3</li>
        <li class="test">4</li>
        <li class="test">5</li>
    </ul>

    3、position+absolute

    ie6/7/8不支持

    .wp {position:relative; }
    .test { 
          left:50%;  
          transform:translate(-50%,0); 
          -webkit-transform:translate(-50%,0);
          position:absolute; 
     }
    <ul class="wp">
        <li class="test">
            <span class="inner">1</span>
            <span class="inner">2</span>
            <span class="inner">3</span>
            <span class="inner">4</span>
            <span class="inner">5</span>
        </li>
    </ul>

    4、弹性盒子

    IE6/7不支持

    .wp{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
         -moz-box-align: center;
         -ms-flex-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
         -moz-box-pack: center;
         -ms-flex-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
        background-color: #ccc;
    
    }
    .test{
        background-color: #edd;
        display: inline-block;
        margin: 0 5px;
    }
    <ul class="wp">
        <li class="test">1</li>
        <li class="test">2</li>
        <li class="test">3</li>
        <li class="test">4</li>
        <li class="test">5</li>
    </ul>
  • 相关阅读:
    hibernate--could not initialize proxy
    20160509-hibernate--继承映射
    CF1111C Creative Snap
    CF1097D Makoto and a Blackboard
    CF1091D New Year and the Permutation Concatenation
    CF1096D Easy Problem
    CF1076E Vasya and a Tree
    CF1081C Colorful Bricks
    CF1081E Missing Numbers
    CF1093D Beautiful Graph
  • 原文地址:https://www.cnblogs.com/qianlegeqian/p/4310512.html
Copyright © 2011-2022 走看看