如何将3个html表并排放置到中心位置

Question

我在html中有以下代码，我需要将它们放在页面中。

我尝试将每张桌子对齐到中心位置，但它没有用。我正在使用div标签，它对齐到中心，但桌子没有居中。请帮忙

<div align="center">
<table border='1' style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table border='1' style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table border='1' style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>

</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
</div>

Answer 1

您可以使用flex框方法，如：

＆＃13;

＆＃13;

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

＆＃13;

<div class="center">
<table border='1' class="table" style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table id="mainTable2" border='1' class="table" style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table id="mainTable3" border='1' class="table" style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>

</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
</div>

＆＃13;

＆＃13;

＆＃13;