如何将定价小部件与 HTML/CSS 居中对齐？

Question

嗨，实际上我需要将定价表对齐在中心，在此之前有 3 个表，但我删除了一个，我只需要两个表。 但是当我删除一张桌子时，桌子似乎还是一样，不容易移动。 下面我将分享我如何需要表格的 position 和代码的屏幕截图。

单击此处查看屏幕截图

HTML 代码

    <div class="section-title">
      <h2>Unlimited courses and projects on all paid plans</h2>
      <p>Not sure what is right for your business?<a href="#">  Contact Sales</a></p>
      <p>For Yearly Plans <a href="#">Click Here</a></p>
    </div>

    <div class="row">

      <div class="col-lg-4 col-md-6" data-aos="zoom-im" data-aos-delay="100">
        <div class="box featured">
          <h3>Elite</h3>
          <h4><sup>$</sup>72.00<span> / month</span></h4>
          <ul>
            <li>Everything in PRO +</li>
            <li>+Free Access workshops recordings</li>
            <li>Monthly live Q&A calls</li>
            <li>Enhanced Transcripts</li>
            <li>Keep your team sharp and productive</li>
            <li>+5 People Access</li>
            <li>+50% Save on Monthly!</li>
            <li>+Priority Support/Help</li>
            <li>+iOS App Offline Watch <a href="#">Learn</a></li>
            <li>+No Monthly Contracts</li>
            <li>+Cancel Anytime</li>
            <li><a href="#">Learn More Here<a/></li>
            
          </ul>
          <div class="btn-wrap">
            <a href="#" class="btn-buy">Buy Now</a>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 mt-4 mt-md-0" data-aos="zoom-in" data-aos-delay="100">
        <div class="box">
          <h3>Pro</h3>
          <h4><sup>$</sup>29.00<span> / month</span></h4>
          <ul>
            <li>Everything in BASIC +</li>
            <li>+Download Source Code</li>
            <li>+Download Self Guided Course Steps</li>
            <li>+Download Course Slide Deck</li>
            <li>+Access Quiz & Excercises</li>
            <li class="na">+50% Save on Monthly!</li>
            <li>+Priority Support/Help</li>
    <li>+iOS App Offline Watch <a href="#">Learn</a></li>
    <li class="na">+5 People Access</li>
            <li>+No Monthly Contracts</li>
            <li>+Cancel Anytime</li>
            <li style="color:white"><a href="#">Learn More Here<a/></li>
          </ul>
          <div class="btn-wrap">
            <a href="#" class="btn-buy">Buy Now</a>
          </div>
        </div>
      </div>

    </div>

  </div>

CSS 代码

    .pricing .box {
  padding: 500px 20px;
  text-align: center;
  border-radius: 8px;
  position: inherit;
  overflow: hidden;
  background: #fefefe;
  box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1);
}

.pricing .box h3 {
  font-weight: 400;
  padding: 15px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: #124265;
}

.pricing .box h4 {
  font-size: 42px;
  color: #2487ce;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 20px;
}

.pricing .box h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .box h4 span {
  color: #bababa;
  font-size: 16px;
  font-weight: 300;
}

.pricing .box ul {
  padding: 0;
  list-style: none;
  color: #124265;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .box ul li {
  padding-bottom: 16px;
}

.pricing .box ul .na {
  color: #ccc;
  text-decoration: line-through;
}

.pricing .box .btn-wrap {
  padding: 15px;
  text-align: center;
}

.pricing .box .btn-buy {
  display: inline-block;
  padding: 10px 40px;
  border-radius: 4px;
  color: #2487ce;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  transition: 0.3s;
  border: 2px solid #2487ce;
}

.pricing .box .btn-buy:hover {
  background: #2487ce;
  color: #fff;
}

.pricing .featured {
  background: #2487ce;
}

.pricing .featured h3, .pricing .featured h4, .pricing .featured h4 span, .pricing .featured ul, .pricing .featured ul .na {
  color: #fff;
}

.pricing .featured .btn-wrap {
  padding: 15px;
  text-align: center;
}

.pricing .featured .btn-buy {
  color: #fff;
  border: 2px solid #fff;
}

.pricing .featured .btn-buy:hover {
  background: #fff;
  color: #2487ce;
}

请参阅屏幕截图以查看我需要的更改
谢谢

Answer 1

请参阅 Flexbox 的完整指南“Flexbox 代表灵活框。它是 CSS 的布局模块”

Answer 2

在行的d-flex justify-content-center上添加row

<div class="row pricing d-flex justify-content-center">

https://jsfiddle.net/lalji1051/k3gr91xj/2/

Answer 3

我猜您在HTML文件中使用的 class 名称与在CSS文件中使用的名称不同。 尝试先纠正它们。

Answer 4

检查这个codepen.io

它的工作将其添加到 css

.pricing{
    display: flex;
    justify-content: center;
}

这不会影响定价表的宽度

如果你添加<div class='row pricing d-flex justify-content-center'>定价表的宽度会改变

不要忘记将 class pricing添加到<div class='row pricing'>