css - 无法在容器内成功居中按钮

Question

我正在使用 bootstrap 4，但我无法正确地将按钮/链接居中 - 无论我如何尝试使用 text-center 类(用 div 或在链接上包围它)

<div class="row text-center">
  <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>

代码笔在这里: https://codepen.io/anon/pen/GdbPyr

Answer 1

只需在父组件中添加:justify-content-center。代码将如下所示:

<!-- ******Key Features****** -->
<section class="key-features ">
  <div class="container pt-4">
    <div class="row justify-content-center"style="background: red">
      <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
    </div>
  </div>
</section>

工作笔:https://codepen.io/manAbl/pen/bMPOJM?editors=1000 ;

-- 我添加背景只是为了得到一个提示，这真的对我有帮助，让我不时有一些观点 --

希望有所帮助:)