html - 居中的 div 偏离中心？

Question

我有一个 6x4 的 150 像素 div 阵列，每个都有 5 像素的边距(想象一下 Metro UI)。我也有一个模态 div。正方形div都是display: inline-block，在父div中以text-align居中，每6个后换行(做成6x4的格子) .当我的模式(也居中，带有 margin)弹出时，它与同样居中的图 block 略微不对齐。为什么会这样？这没什么大不了的，但它与它下面的方形瓷砖对齐，所有东西都偏离 1-2 像素看起来很糟糕。 text-align: center 和 margin: auto 是否存在差异导致此问题？

来自 HTML:

<div id="container">
<br />
<div id="tile11">

</div>
<div id="tile12">

</div>
<div id="tile13">

</div>
<div id="tile14">

</div>
<div id="tile15">

</div>
<div id="tile16">

</div>
<br />
<div id="tile21">

</div>
<div id="tile22">

</div>
...........
<div id="tile46">

</div>
</div>

来自 CSS:

#container {
background: #000000;
width: 1000px;
height: 680px;
z-index: 1;
text-align: center;
margin: 10px auto 0px auto;
}

#tile44 {
background: #333333;
width: 150px;
height: 150px;
margin: 5px;
display: inline-block;
z-index: 1;
}

Answer 1

以此为开端:

http://jsfiddle.net/HdHRe/10/

#container {
   background: #000000;
   width: 960px;
   height: 680px;
   margin: 0 auto;
   padding: 5px;
   overflow: auto;
}

#container div {
   background: #333333;
   width: 150px;
   height: 150px;
   margin: 5px;
   float: left;
}

我认为这是创建网格的更好方法。现在我们需要知道您想在哪里显示模态窗口。