Question

我正在使用while循环显示在不同的表中显示的几组人。
我发现如果我使用inline-block，则margin auto无法正常运行。
我希望这两个表显示内联和慢速棕色贝娄是我的代码：

<table style="display: inline-block; margin: auto;" class="table table-striped table-bordered" >
<thead>
     <tr>
        <th colspan="2">
        manager group 2
        </th>
    </tr>
    <tr>
        <th>Manager Name</th>
        <th>User Details</th>
    </tr>
</thead>
 <tbody>
    <tr>
        <td>Kelvin</td>
        <td><a href="admin_edit.php?id=<?php echo $mrow["id"]; ?>" >User Details</a></td>
    </tr>
</tbody>
</table>

<table style="display: inline-block; margin: auto;" class="table table-striped table-bordered" >
<thead>
    <tr>
        <th colspan="2">
        manager group 1
        </th>
    </tr>
    <tr>
        <th>Manager Name</th>
        <th>User Details</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>James</td>
        <td><a href="admin_edit.php?id=<?php echo $mrow["id"]; ?>" >User Details</a></td>
    </tr>
</tbody>
</table>

Answer 1

margin: auto;对设置为display: inline-block;的元素没有任何作用，您需要将实际单位值设置为以像素，ems，rems等为单位的边距，并且元素需要要么是显示块（或者在表格的情况下，你不需要打扰更新它们的显示，因为边缘自动与display：table以类似的方式工作）

但是，既然你试图将两个表并排放置，那么你应该将这些表包装在它们自己的<div>中，每个表都设置了最大宽度，然后你可以定位这些div根据需要布置表格。我已经包含了一个基本演示（需要在全屏幕上查看并排查看表格，因为如果没有足够的水平空间，它们会堆叠在一起......你需要考虑的事情同样，如果您正在使用响应式界面）：

.txt-center {
  text-align: center;
}

div > div{
  border: 1px solid;
  display: inline-block;
  margin-bottom: 12px;
  max-width: 300px;
  vertical-align: bottom;
  padding: 8px;
}

table {
  border: 1px solid;
  min-width: 300px;
}

td {
  border: 1px solid;
}

<div class="txt-center">
  <div class="example">
    <table>
      <tr>
        <td>
          example
        </td>
        <td>
          example
        </td>
      </tr>
    </table>
  </div>
  <div class="example">
    <table>
      <tr>
        <td>
          example
        </td>
        <td>
          example
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 2

margin: auto不起作用，因为您的表格display为inline-block，它们会在inline个元素（如<span>）页面上流动。由于内联元素没有额外的水平空间（字符只知道自己，仅此而已），margin: auto表示inline或inline-block元素的“没有余量”。

在您的情况下，由于表格display为inline-block，您可以在其父容器上使用text-align: center来居中，下面附有一个示例（如果body表格的父母是：

body {
  text-align: center
}

在循环中使用margin auto和inline block

2 个答案: