文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >调整大小时保持元素居中

问调整大小时保持元素居中
EN

Stack Overflow用户
提问于 2017-01-16 22:54:37
回答 1查看 96关注 0票数 0

因此，通常我有4个部分，如下所示：

​

​

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

这是我的CSS：

代码语言：javascript
复制
    .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;
    }
}

无论如何，有没有一种方法可以将部分放在中心位置？

​

​

html
css
resize
css-position
EN

回答 1

Stack Overflow用户

发布于 2017-01-16 22:59:13

代码语言：javascript
复制
    .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;
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41679120

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档