html - 中心子 div 与父 div 内的表

Question

嗨，这是我的代码片段，我试图将父容器下方的容器居中对齐，但我的 css 没有按预期工作。谁能帮助我的表格为什么没有居中对齐。我已经通过堆栈溢出的各种解决方案，但似乎没有任何工作。在片段中，我将表数显示为 3，但也可以是最多 8 个。它是动态的。

 <style>
         .parent_container {

            width: 100%;
            text-align: center;
        }
        .table_container {
            float: left;
            width: 30rem;
            margin-bottom: 3rem;
        }

        .table_container2 {
            float: left;
            width: 30rem;
            margin-bottom: 3rem;
        }

        .container {
            width: 100%;
            margin-top: 30px;
            display: inline-block
        }

        .container::after {
            content: "";
            clear: both;
            display: table;
        }

        table {
            margin: 2rem auto;
            border-radius: 10px;
        }

        tr {
            padding: 15px;
            text-align: center;
        }

        td {
            color: black;
            text-align: center;
            vertical-align: middle;
            height: 60px;
            background-color: #e1edf9;
            width: 272px;
            border-top: 1px solid white;
        }

        td: first-of-type {
            border-top: none;
        }

        .sub_text {
            font-size: 12px;
            font-style: italic;
            color: #0071ce;
            font-weight: 100;
        }
        .wrapper {
            text-align: center;
            margin-top: 20px;
        }
        @media screen and (min-width: 1400px) {
            .table_container {
                float: left;
                width: 15rem;
            }

            .table_container:first-of-type {
                width: 30rem;
            }
        }

        @media screen and (min-width: 1400px) {
            .table_container2 {
                float: left;
                width: 15rem;
            }

            .table_container2:first-of-type {
                width: 30rem;
            }
        }

        @media only screen and (min-width: 1000) and (max-device-width: 1400px) {
            .table_container2 {
                float: left;
                width: 14rem;
            }

            .table_container2:first-of-type {
                width: 27rem;
            }
        }

        @media only screen and (min-width: 1000) and (max-device-width: 1400px) {
            .table_container {
                float: left;
                width: 14rem;
            }

            .table_container:first-of-type {
                width: 27rem;
            }
        }

    </style>

<div class="parent_container">
    <div class="wrapper">
        <a type="button" id="modalButton" class="btn btn-primary" data-target="#myModal" onclick="showmodal ();">
            Compare
        </a>
    </div>
    <div class="container">
        <div class="table_container">
            <table>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="table_container">
            <table>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="table_container">
            <table>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="container2">
        <div class="table_container2">
            <table>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="table_container2">
            <table>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="table_container2">
            <table>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>

标签： htmlcssalignmentmedia-queriescenter

Answer 1

尝试添加

display: flex;
justify-content: center;

到你的父容器

.parent_container {
  width: 100%;
  text-align: center;
}

.table_container {
  float: left;
  width: 30rem;
  margin-bottom: 3rem;
}

.table_container2 {
  float: left;
  width: 30rem;
  margin-bottom: 3rem;
}

.container {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

table {
  margin: 2rem auto;
  border-radius: 10px;
}

tr {
  padding: 15px;
  text-align: center;
}

td {
  color: black;
  text-align: center;
  vertical-align: middle;
  height: 60px;
  background-color: #e1edf9;
  width: 272px;
  border-top: 1px solid white;
}

td: first-of-type {
  border-top: none;
}

.sub_text {
  font-size: 12px;
  font-style: italic;
  color: #0071ce;
  font-weight: 100;
}

.wrapper {
  text-align: center;
  margin-top: 20px;
}

@media screen and (min-width: 1400px) {
  .table_container {
    float: left;
    width: 15rem;
  }
  .table_container:first-of-type {
    width: 30rem;
  }
}

@media screen and (min-width: 1400px) {
  .table_container2 {
    float: left;
    width: 15rem;
  }
  .table_container2:first-of-type {
    width: 30rem;
  }
}

@media only screen and (min-width: 1000) and (max-device-width: 1400px) {
  .table_container2 {
    float: left;
    width: 14rem;
  }
  .table_container2:first-of-type {
    width: 27rem;
  }
}

@media only screen and (min-width: 1000) and (max-device-width: 1400px) {
  .table_container {
    float: left;
    width: 14rem;
  }
  .table_container:first-of-type {
    width: 27rem;
  }
}

<div class="parent_container">
  <div class="wrapper">
    <a type="button" id="modalButton" class="btn btn-primary" data-target="#myModal" onclick="showmodal ();">
            Compare
        </a>
  </div>
  <div class="container">
    <div class="table_container">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
  <div class="container container2">
    <div class="table_container2">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container2">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container2">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</div>