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

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;
}

检查这个演示

_{在这里,您可以了解有关内联块的更多信息}

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