嘗試使用CSS在表格中居中表格

Question

我正在研究此項目，並且我的這種佈局適用於所有屏幕分辨率，並且我試圖在屏幕分辨率小於745px。但是我在另一個表格單元格中有兩個表格，它們不會按照他們應該的方式對齊。我正在使用margin：0px auto;在CSS中，但他們不會做我告訴他們要做的事情，儘管我所知道的關於CSS的一切都表示它應該可以工作。

在屏幕分辨率更高的情況下，這兩個表格會被告知浮動到其父級單元格的左側和右側，他們的表現很好。但是當我在屏幕分辨率小於745px的情況下更改CSS代碼時，我告訴他們顯示：block; margin：0px auto;這應該將他們集中在他們的牢房內，但事實並非如此。難道我做錯了什麼？

/*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;來覆蓋不同的 「路線」