html两个表水平对齐中心

Question

如何将两张桌子并排居中？

我以单桌为中心，但我不能把两张桌子放在中心，有一种简单的方法，但我不能，我怎么能用css做？

我的代码如下：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
 body {
  background-color: #FFFFFF;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
/*** Table Styles **/

.table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  height: 120px;
  max-width: 400px;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-right">Val1</td>
      <td class="text-center">a</td>
      <td class="text-left">%</td>
    </tr>
  </tbody>
</table>

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-center">AÇILAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
    <tr>
      <td class="text-center">KALAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
  </tbody>
</table>

Answer 1

添加＆＃39; display：inline-table;＆＃39; css到.table-fill css类，可以解决你的问题

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
 body {
  background-color: #FFFFFF;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
/*** Table Styles **/

.table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  height: 120px;
  max-width: 400px;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
  display:inline-table;
}

＆＃13;

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-right">Val1</td>
      <td class="text-center">a</td>
      <td class="text-left">%</td>
    </tr>
  </tbody>
</table>

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-center">AÇILAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
    <tr>
      <td class="text-center">KALAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将text-align:center;添加到正文或表格的父级，display:inline-table;添加到.table-fill，并在整页视图中进行检查。

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
 body {
  background-color: #FFFFFF;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  text-align:center;
}
/*** Table Styles **/

.table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  height: 120px;
  max-width: 400px;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
  display: inline-table;
}

＆＃13;

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-right">Val1</td>
      <td class="text-center">a</td>
      <td class="text-left">%</td>
    </tr>
  </tbody>
</table>

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-center">AÇILAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
    <tr>
      <td class="text-center">KALAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;