调整大小时保持元素居中

时间：2017-01-16 14:54:37

标签： html css resize css-position

通常我有4个这样的部分：

enter image description here

但是，调整大小时，每个部分都向左浮动。我希望他们即使在这种情况下也能保持中心。

这是我的CSS：

    .pricing-section {
      padding: 110px 0 150px 0;
      float: left;
      width: 100%;
      text-align: center;
    }
    .pricing-columns .wrapper-full {
      position: relative;
      width: auto;
      margin: auto auto;

    }
    .pricing-columns #pricing-chart,
    .pricing-columns-both #pricing-chart {
      margin-top: 100px;
      display: inline-block;
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }
    .pricing-columns #pricing-chart #smaller-plans,
    .pricing-columns-both #pricing-chart #smaller-plans {
      display: inline-block;
    }
    .pricing-columns #pricing-chart .plan,
    .pricing-columns-both #pricing-chart .plan {
      float:left;
      background-color: #fafafa;
      position: relative;
      color: #454545;
      padding: 10px;
      border-right: 1px solid #e1e1e1;
      border-bottom: 1px solid #e1e1e1;
      border-top: 1px solid #e1e1e1;
      border-left: 1px solid #e1e1e1;
      width: 220px;

    }
    .pricing-columns #pricing-chart .plan:first-child,
    .pricing-columns-both #pricing-chart .plan:first-child {
      border-left: 1px solid #e1e1e1;
    }
    .pricing-columns #pricing-chart .plan:before,
    .pricing-columns-both #pricing-chart .plan:before {
      content: "";
      position: absolute;
      height: 5px;
      left: 0px;
      top: 0;
      background-color: #233E48;
      width: inherit;
    }

and the resize specific CSS:

@media screen and (min-width: 800px){
    .popular{
        border:2px solid #13BD9B;

      }
      .pricing-columns #pricing-chart .popular,
      .pricing-columns-both #pricing-chart .popular {
          width: 274px;
          position: relative;
          top: -30px;
          background-color: white;
          margin-left: 0px;
          right: 0;
          border: 2px solid #13BD9B;

        }
        .pricing-columns #pricing-chart .popular:before,
        .pricing-columns-both #pricing-chart .popular:before {
          width: 100%;
          background-color: #13BD9B;
          height: 7px;
        }
        .pricing-columns #pricing-chart .popular a.sign-up,
        .pricing-columns-both #pricing-chart .popular a.sign-up {
          background-color: #13BD9B;
          border: none;
          color: #ffffff;

        }
        .pricing-columns #pricing-chart .popular .price .amount,
        .pricing-columns-both #pricing-chart .popular .price .amount {
          font-size: 60px;
        }
        .bandwidth {
          display: block;
          color: #9e9e9e;
          font-size: 16px;
          position: absolute;
          right: 0;
          bottom: -90px;
        }
        .pricing-columns #pricing-chart .popular p.pop-plan,
        .pricing-columns-both #pricing-chart .popular p.pop-plan {
          color: #454545;
          font-size: 16px;
          margin-bottom: 35px;
        }
        .pricing-columns #pricing-chart .popular .price,

        .pricing-columns-both #pricing-chart .popular .price {
          margin-bottom: 0px;
        }
        .pricing-columns #pricing-chart .plan a.sign-up:hover,
        .pricing-columns-both #pricing-chart .plan a.sign-up:hover {
          background-color: #13BD9B;
          color: white;
          opacity: 0.8;
          margin-bottom: 0px;
        }
        .pricing-columns #pricing-chart .popular a.sign-up:hover {
          background-color: white;
          color: #13BD9B;
          border: 1px solid #13BD9B;
          opacity: 0.8;
        }


    }
    .hide {
      display: none;
    }
}

有没有办法将这些部分放在中心，无论如何？

enter image description here

1 个答案:

答案 0 :(得分：0)

    .pricing-section {
      padding: 110px 0 150px 0;
      float: left;
      width: 100%;
      text-align: center;
    }
    .pricing-columns .wrapper-full {
      display: block;
      width: auto;
      margin: auto auto;

    }
    .pricing-columns #pricing-chart,
    .pricing-columns-both #pricing-chart {
      margin-top: 100px;
      display: inline-block;
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }
    .pricing-columns #pricing-chart #smaller-plans,
    .pricing-columns-both #pricing-chart #smaller-plans {
      display: inline-block;
    }
    .pricing-columns #pricing-chart .plan,
    .pricing-columns-both #pricing-chart .plan {
      float:left;
      background-color: #fafafa;
      display: block;
      color: #454545;
      padding: 10px;
      border-right: 1px solid #e1e1e1;
      border-bottom: 1px solid #e1e1e1;
      border-top: 1px solid #e1e1e1;
      border-left: 1px solid #e1e1e1;
      width: 220px;

    }
    .pricing-columns #pricing-chart .plan:first-child,
    .pricing-columns-both #pricing-chart .plan:first-child {
      border-left: 1px solid #e1e1e1;
    }
    .pricing-columns #pricing-chart .plan:before,
    .pricing-columns-both #pricing-chart .plan:before {
      content: "";
      position: relative;
      height: 5px;
      left: 0px;
      top: 0;
      background-color: #233E48;
      width: inherit;
    }

and the resize specific CSS:

@media screen and (min-width: 800px){
    .popular{
        border:2px solid #13BD9B;

      }
      .pricing-columns #pricing-chart .popular,
      .pricing-columns-both #pricing-chart .popular {
          width: 274px;
          position: relative;
          top: -30px;
          background-color: white;
          margin-left: 0px;
          right: 0;
          border: 2px solid #13BD9B;

        }
        .pricing-columns #pricing-chart .popular:before,
        .pricing-columns-both #pricing-chart .popular:before {
          width: 100%;
          background-color: #13BD9B;
          height: 7px;
        }
        .pricing-columns #pricing-chart .popular a.sign-up,
        .pricing-columns-both #pricing-chart .popular a.sign-up {
          background-color: #13BD9B;
          border: none;
          color: #ffffff;

        }
        .pricing-columns #pricing-chart .popular .price .amount,
        .pricing-columns-both #pricing-chart .popular .price .amount {
          font-size: 60px;
        }
        .bandwidth {
          display: block;
          color: #9e9e9e;
          font-size: 16px;
          position: relative;
          right: 0;
          bottom: -90px;
        }
        .pricing-columns #pricing-chart .popular p.pop-plan,
        .pricing-columns-both #pricing-chart .popular p.pop-plan {
          color: #454545;
          font-size: 16px;
          margin-bottom: 35px;
        }
        .pricing-columns #pricing-chart .popular .price,

        .pricing-columns-both #pricing-chart .popular .price {
          margin-bottom: 0px;
        }
        .pricing-columns #pricing-chart .plan a.sign-up:hover,
        .pricing-columns-both #pricing-chart .plan a.sign-up:hover {
          background-color: #13BD9B;
          color: white;
          opacity: 0.8;
          margin-bottom: 0px;
        }
        .pricing-columns #pricing-chart .popular a.sign-up:hover {
          background-color: white;
          color: #13BD9B;
          border: 1px solid #13BD9B;
          opacity: 0.8;
        }


    }
    .hide {
      display: none;
    }
}
相关问题
最新问题