Question

我试图用一个或两个表彼此相邻显示div。表格应该居中：

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

我的HTML看起来像这样：

<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

Answer 2

如果您不想使用flexbox（与旧浏览器不兼容），请从display: inline;删除column，向其添加text-align: center;并添加{{1}转到display: inline-table;：

（内联元素可以使用容器上的.centered居中）

＆＃13;

text-align: center;

＆＃13;

div.row {
  display: block;
  width: 100%;
}

div.column {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

table.centered {
  border: 1px;
  border-style: solid;
  margin: 20px;
  display: inline-table;
}

＆＃13;

https://jsfiddle.net/pLccg6w3/

Answer 3

不确定这是不是你要找的，但这是我发布的小提琴。我创建了table.centered float:left;然后添加了一个.left和。第一个和第三个框的正确类，只是给了他们margin-top:100px;

https://jsfiddle.net/k9w7yt0f/1/

一个或两个以div为中心的表

3 个答案: