尝试使用 CSS 在表格中居中表格答案

【问题标题】：Trying to center a table within a table using CSS尝试使用 CSS 在表格中居中表格
【发布时间】：2015-06-08 02:05:49
【问题描述】：

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

在更高的屏幕分辨率下，这 2 个表格被告知浮动到其父单元格的左侧和右侧，它们做得很好。但是当我在小于 745px 的屏幕分辨率下更改 CSS 代码时，我告诉他们 display: block;边距：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>

【问题讨论】：

标签： html css html-table centering

【解决方案1】：

由于 float 仍然处于活动状态（或应该处于活动状态），请尝试添加 float:none, or float:none !important; 以覆盖不同“对齐方式”的混搭

【讨论】：

没问题，注意@media，即使你设置了一套新规则，它仍然会调用所有其他代码，考虑给@media min-width and max-width ，这样溢出的css就不会了t 触发
谢谢。我会尽量记住这样做。