引导程序中的调整内容中心属性无法使行中的内容居中

Question

我已经在引导程序中创建了一个节，该节包含8个按钮，第一行中有5个按钮，第二行中有3个按钮，现在，当我创建该节时，它看起来如下所示：

enter image description here

这不是我要对齐内容的方式，我要对齐内容，如下所示：

enter image description here

为此，我在行中添加了证明内容以及mx-auto属性，但没有任何效果，我的完整代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
  .banner-cta {
    background: #23746F;
    padding: 30px;
  }
  
  .banner-cta h2,
  .banner-cta p,
  .banner-cta a {
    text-align: center;
    margin: auto;
    position: relative;
    display: block;
    color: white;
    font-family: 'Raleway', sans-serif !important;
  }
  
  .banner-cta h2,
  .banner-cta p {
    padding-bottom: 50px;
  }
  
  .banner-cta p {
    max-width: 700px;
    font-size: 1.1em;
  }
  
  #dada {
    padding-bottom: 1%;
  }
</style>


<div class="container-fluid">
  <div class="banner-cta">
    <h2 class="banner-cta-title">PARTY AT RAMOJI FILM CITY</h2>
    <div id="dada" class="row justify-content-center">
      <a href="#"><button class="btn btn-light btn-md">DAY TOURISM</button></a>
      <a href="#"><button class="btn btn-light btn-md">BIRTHDAY PARTY</button></a>
      <a href="#"><button class="btn btn-light btn-md">SAHAS</button></a>
      <a href="#"><button class="btn btn-light btn-md">CORPORATE PACKAGES</button></a>
      <a href="#"><button class="btn btn-light btn-md">VENUE BOOKINGS</button></a>
    </div>
    <div class="row">
      <a href="#"><button class="btn btn-light btn-md">SURPRISE PARTY</button></a>
      <a href="#"><button class="btn btn-light btn-md">POST WEDDING RELAX</button></a>
      <a href="#"><button class="btn btn-light btn-md">WEDDING STYLE</button></a>
    </div>

  </div>
</div>

任何人都可以告诉我我的代码有什么问题，在此先感谢

Answer 1

.banner-cta a {
    margin: auto;
  }

不需要那里。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
  .banner-cta {
    background: #23746F;
    padding: 30px;
  }
  
  .banner-cta h2,
  .banner-cta p,
  .banner-cta a {
    text-align: center;
    position: relative;
    display: block;
    color: white;
    margin:2px; //or more if you need
    font-family: 'Raleway', sans-serif !important;
  }
  
  .banner-cta h2,
  .banner-cta p {
    padding-bottom: 50px;
  }
  
  .banner-cta p {
    max-width: 700px;
    font-size: 1.1em;
  }
  
  #dada {
    padding-bottom: 1%;
  }
  .row{
    display:flex;
    justify-content:center
  }
</style>


<div class="container-fluid">
  <div class="banner-cta">
    <h2 class="banner-cta-title">PARTY AT RAMOJI FILM CITY</h2>
    <div id="dada" class="row justify-content-center">
      <a href="#"><button class="btn btn-light btn-md">DAY TOURISM</button></a>
      <a href="#"><button class="btn btn-light btn-md">BIRTHDAY PARTY</button></a>
      <a href="#"><button class="btn btn-light btn-md">SAHAS</button></a>
      <a href="#"><button class="btn btn-light btn-md">CORPORATE PACKAGES</button></a>
      <a href="#"><button class="btn btn-light btn-md">VENUE BOOKINGS</button></a>
    </div>
    <div class="row">
      <a href="#"><button class="btn btn-light btn-md">SURPRISE PARTY</button></a>
      <a href="#"><button class="btn btn-light btn-md">POST WEDDING RELAX</button></a>
      <a href="#"><button class="btn btn-light btn-md">WEDDING STYLE</button></a>
    </div>

  </div>
</div>