证明 bootstrap 中的内容中心属性无法使内容居中

Question

我在 bootstrap 中创建了一个部分，该部分包含 8 个按钮，第一行有 5 个，第二行有 3 个，现在当我创建该部分时，它看起来如下所示：

enter image description here

这不是我想要对齐内容的方式，我想像下面这样对齐内容：

enter image description here

为此，我在我的行中添加了 justify content 和 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>

证明 bootstrap 中的内容中心属性无法使内容居中

justify content center property in bootstrap not working to center contents in a row

html

css

row

alignment

bootstrap-4

证明 bootstrap 中的内容中心 属性 无法使内容居中

justify content center property in bootstrap not working to center contents in a row

html

css

row

alignment

bootstrap-4

证明 bootstrap 中的内容中心属性无法使内容居中