Question

大家好。我正在使用bootstrap 4表格，并且试图更改表格的位置。它在容器中，但在容器的左侧对齐。我应该居中对齐。这是我的代码和示例屏幕截图。而且，如果您想在这里观看直播，那就是我的测试网站：cantest.ga

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col-md-12">
      <div class="align-middle">
        <table class="table table-bordered table-responsive">
          <thead class="thead-dark">
            <tr>
              <th colspan="8" class="">Champion List</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <a href="#"><img src="img/Aatrox.png" class="" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Ahri.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Akali.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Alistar.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Amumu.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Anivia.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Annie.png" width="80" height="80" alt=""></a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#"><img src="img/Ashe.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/AurelionSol.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Azir.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Bard.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Blitzcrank.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Brand.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Braum.png" width="80" height="80" alt=""></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试此CSS代码

table { margin:auto; }

Answer 2

您需要添加css，如下所示，并将表响应类移动到周围的div而不是表上：

.table {
    width: 50%;
    margin: 0 auto !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col-md-12">
      <div class="align-middle table-responsive">
        <table class="table table-bordered ">
          <thead class="thead-dark">
            <tr>
              <th colspan="8" class="text-center">Champion List</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <a href="#"><img src="img/Aatrox.png" class="" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Ahri.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Akali.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Alistar.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Amumu.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Anivia.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Annie.png" width="80" height="80" alt=""></a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#"><img src="img/Ashe.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/AurelionSol.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Azir.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Bard.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Blitzcrank.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Brand.png" width="80" height="80" alt=""></a>
              </td>
              <td>
                <a href="#"><img src="img/Braum.png" width="80" height="80" alt=""></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

容器中的垂直对齐

2 个答案: