html - 一个或两个表格以 div 为中心

Question

我正在尝试显示一个或两个相邻表格的 div。表格应该居中:

*div*****************************************************************************                                      Table 1                                 **                                   |...|...|...|                              **********************************************************************************div*****************************************************************************                    Table 2                             Table 3               **                 |...|...|...|                       |...|...|...|            *********************************************************************************

My html looks something like this:

<div class="all">
  <div class="row"> <!-- row with 1 table in it -->
    <div class="column">
      <table class="centered">
          ...
      </table>
    </div>
  </div>

  <div class="row"> <!-- row with 2 tables in it -->
    <div class="column">
      <table class="centered">
          ...
      </table>
    </div>
    <div class="column">
      <table class="centered">
          ...
      </table>
    </div>
  </div>

</div>

到目前为止，我还没有找到合适的 CSS。我当前的 CSS 如下所示:

div.row {
  display: block;
  width: 100%;
}

div.column {
  display: inline;
  margin-left: auto;
  margin-right: auto;
}

table.centered {
  border: 1px;
  border-style: solid;
  margin: 20px;
}

jsfiddle 在这里:jsfiddle

请帮助我理解 CSS...

Answer 1

使用 Flexbox，无论您在每一行中添加多少列，它都会起作用:

.row {
    display: flex;
    justify-content: center;
}

jsfiddle