我在页面上以表格格式存在4个图像。在您调整页面大小时，表格会通过media queries更改。它从连续4个，连续3个，下面1个，连续2个，连续2个，每行1个，有4行。
以下代码适用于前面描述的两个实例（连续4个然后是3个）但不适用于2x2：
@media only screen and (max-width:631px){
.resize-logo {width:350px;height:auto}
.DBS-logo {margin-top:100px;margin-left:auto;margin-right:auto;display:table}
.allBanners {margin-top:100px;margin-left:auto;margin-right:auto;display:table}
.banner1 {margin-left:auto;margin-right:auto;text-align:center;width:300px}
.banner2 {margin-left:auto;margin-right:auto;text-align:center;width:300px}
.banner3 {margin-left:auto;margin-right:auto;text-align:center;width:300px}
.banner4 {margin-left:auto;margin-right:auto;text-align:center;width:300px}
.style1 {margin:auto;margin-top:100px;font-size:20px}
}
@media only screen and (min-width:632px) and (max-width:947px){
.resize-logo {width:400px;height:auto}
.DBS-logo {margin-top:100px;margin-left:auto;margin-right:auto;display:table}
.allBanners {margin-top:150px;margin-left:auto;margin-right:auto;display:table}
.banner1 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner2 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner3 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner4 {text-align:center;width:300px;display:inline-table;padding:5px}
.style1 {margin:auto;margin-top:100px;font-size:20px}
}
@media only screen and (min-width:948px) and (max-width:1263px){
.resize-logo {width:400px;height:auto}
.DBS-logo {margin-top:100px;margin-left:auto;margin-right:auto;display:table}
.allBanners {margin-top:150px;margin-left:auto;margin-right:auto;display:table}
.banner1 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner2 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner3 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner4 {margin-left:auto;margin-right:auto;text-align:center;width:300px;padding:5px}
.style1 {margin:auto;margin-top:100px;font-size:20px}
}
@media only screen and (min-width:1264px){
.resize-logo {width:400px;height:auto}
.DBS-logo {margin-top:100px;margin-left:auto;margin-right:auto;display:table}
.allBanners {margin-top:200px;margin-left:auto;margin-right:auto;display:table}
.banner1 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner2 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner3 {text-align:center;width:300px;display:inline-table;padding:5px}
.banner4 {text-align:center;width:300px;display:inline-table;padding:5px}
.style1 {margin:auto;margin-top:100px;font-size:20px}
}
它仍然将它们放入行中，每行2行2行，但它不会像其他部分一样将它们居中到页面的中心。在inspecting the element之后我注意到，对于那些确保其居中的人，width of the container在margin更新时保持不变。对于不起作用的，width of the container会在margin保持不变的情况下发生变化。
问题是什么？
修改
以下是我的网页代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marketing</title>
<link rel="stylesheet" type="text/css" href="_/css/start.css">
</head>
<body>
<div class="DBS-logo">
<table>
<tr>
<td>
<img class="resize-logo" src="_/img/dbs_logo_dvd.png">
</td>
</tr>
</table>
</div>
<div class="allBanners">
<table class="banner1">
<tr>
<td>
<a href="_/videos/100-Full-Rooms.mp4"><br>
<img class="resize-movies" src="_/img/100_full_rooms.jpg">
</a>
<span class="style1">100 Full Rooms</span>
</td>
</tr>
</table>
<table class="banner2">
<tr>
<td>
<a href="_/videos/About-DBS.mp4"><br>
<img class="resize-movies" src="_/img/about_dbs.jpg">
</a>
<span class="style1">About DBS</span>
</td>
</tr>
</table>
<table class="banner3">
<tr>
<td>
<a href="_/videos/In-the-Beginning.mp4"><br>
<img class="resize-movies" src="_/img/in_the_beginning.jpg">
</a>
<span class="style1">In the Beginning</span>
</td>
</tr>
</table>
<table class="banner4">
<tr>
<td>
<a href="_/videos/The-Power-of-Multiplication.wmv"><br>
<img class="resize-movies" src="_/img/the_power_of_multiplication.jpg">
</a>
<span class="style1">The Power of Multiplication</span>
</td>
</tr>
</table>
</div>
</body>
</html>