尝试使用 CSS 在 table 中居中 table

Question

我正在处理这个项目，我的布局几乎适用于所有屏幕分辨率，我正在尝试对小于 745 像素的屏幕分辨率进行最后润色。但是我在另一个 table 单元格中有 2 个 tables，它们不会按应有的方式对齐。我正在使用 margin: 0px auto;在 CSS 中，但他们不会按照我告诉他们的去做，即使我所知道的关于 CSS 的一切都表明它应该有效。

在更高的屏幕分辨率下，这 2 个 table 被告知浮动到其父单元格的左侧和右侧，它们做得很好。但是当我在小于 745px 的屏幕分辨率下更改 CSS 代码时，我告诉他们显示：块；边距：0px 自动；这应该将它们集中在它们的单元格中，但事实并非如此。难道我做错了什么？

/*Normal Resolutions */

Upper-block, lower-block {
  position: relative;
  margin: 20px auto;
  width: 800px;
  }

left-data {
  display: inline-block;
  width: 50%;
  max-width: 360px;
  float: left;
}

right-data {
  display: inline-block;
  width: 49%;
  max-width: 360px;
  float: right;
}


/*Smaller Resolution */

@media screen and (max-width: 745px) {
    left-data, right-data {
      display: block;
      clear: both;
      margin: 0px auto;
      position: relative;
    }
 }

<div>

<table>
  
  <tr>
    <td>
      <table id="upper-block">
        <tr>
          <td>Table 1 Content</td>
          <IMAGE HERE>
           </td>
           </tr>
      </table>
      </td>
     </tr>
  
  <tr>
    <td>
      <table id="lower-block">
        <tr>
          <td>
            <table id="left-data"> </table>
            <table id="right-data"> </table>
          </td>
        </tr>
      </table>
      </td>
    </tr>
  
</table>
  
</div>

Answer 1

因为 float 仍然有效（或者应该是）尝试添加一个 float:none, or float:none !important; 来覆盖不同的 "alignments"

尝试使用 CSS 在 table 中居中 table

Trying to center a table within a table using CSS

html

css

html-table

centering