Question

我有两张桌子，我希望彼此相邻，但希望它们位于页面的中心。

我几乎做到了，我只有一个问题，如何将它们对齐在页面的中心。我的例子：

我的HTML：

<table class="table_on_the_left">
    <tr><td>
        hello demo here 
        </td></tr></table>

<table class="table_on_the_right">
    <tr><td>
        hello demo here 2 
    </td></tr></table>

我的CSS：

table.table_on_the_left {
    position:center;
    float:left;
   }

  table.table_on_the_right {
    position:center;
    float:right;
  }

Answer 1

您可能希望使用inline-block代替float：

table.table_on_the_left, table.table_on_the_right {
  display:inline-block;
}

并在父级上进行水平对齐text-align:center：

body {
  text-align:center;
}

选中 Demo

<子> Here you can know more about inline-block

除了建议之外，如果您尝试设置页面布局，请避免使用<table>仅将其保存为表格数据，而是使用<div>和定位。

Answer 2

你可以将它们包装在一个div中，并使用它来使它们彼此相邻并居中。

HTML：

<div id="wrap">
    <table class="table_on_the_left">
        <tr>
            <td>hello demo here</td>
        </tr>
    </table>
    <table class="table_on_the_right">
        <tr>
            <td>hello demo here 2</td>
        </tr>
    </table>
</div>

CSS：

table.table_on_the_left {
    position:center;
    float:left;
}
table.table_on_the_right {
    position:center;
    float:right;
}
#wrap {
    width: 250px;
    margin: 0 auto;
}

DEMO HERE

如何将两张桌子从左到右彼此相邻漂浮并将它们居中？

2 个答案:

HTML：

CSS：