html - 如何将两张 table 从左到右并排放置并使它们居中？

Question

我有两个表格，我想将它们并排放置，但希望它们位于页面的中央。

我几乎做到了，我唯一的问题是如何将它们对齐到页面的中心。我的例子:

Demo

我的 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在 parent 身上:

body {
  text-align:center;
}

检查这个 Demo

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

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