html - 卡组不在列中心

Question

我在 div 内的 card-group 中有 3 张 cards，其中包含 col 类一个带有 row 类的 div 在一个带有 container 类的 div 中。 卡片 没有居中。

我已经在 row div 中尝试了 justify-content-center。我已经在 col div 中尝试了 mx-auto。我什至在 col, row, card-group 中尝试了旧的 center html 标签分区。我很茫然。

    <div style="position:relative;">
        <div class="animatedParent shrink" style="color:#ddd;background-color:#424242;text-align:center;padding:50px 80px;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col">
                        <div class="card-group animatedParent mx-auto" data-sequence='250'>
                            <div class="card animated fadeIn slow rounded-0" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/justin.jpg" alt="Justin Worsham" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Justin Worsham
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>CEO</li>
                                       <li>Head Designer</li>
                                       <li>Head Developer</li>
                                       <li>Head Video Editor</li>
                                   </ul>
                                </div>
                            </div>
                            <div class="card animated fadeIn slow" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/daniel.jpg" alt="Daniel Crews" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Daniel Crews
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>CFO</li>
                                       <li>Designer</li>
                                       <li>Developer</li>
                                       <li>Video Editor</li>
                                   </ul>
                                </div>
                            </div>
                            <div class="card animated fadeIn slow rounded-0" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/julian.jpg" alt="Julian Ellis" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Julian Ellis
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>Jr Developer</li>
                                       <li>Server Side Code</li>
                                       <li>Intern Specialist</li>
                                       <li>Back-end Developer</li>
                                   </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

用card代替card-group添加mx-auto类。

<div class="card-group animatedParent" data-sequence='250'>
  <div class="card animated fadeIn slow rounded-0 mx-auto" style="max-width: 250px;" data-id='1'>
    <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/justin.jpg" alt="Justin Worsham" data-id='2'>
    <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
      Justin Worsham
    </div>
    <div class="card-body animated fadeIn slow" style="color:black;" data-id='4'>
      <ul>
        <li>CEO</li>
        <li>Head Designer</li>
        <li>Head Developer</li>
        <li>Head Video Editor</li>
      </ul>
    </div>
  </div>
</div>