Question

我有一个6x4阵列的150px div，每个都有5px的余量（想象一下Metro UI）。我也有一个模态div。方形div都是display: inline-block，在父div中以text-align为中心，每6个后面有一个换行符（用于制作6x4网格）。当我的模态（也是居中，带有margin）弹出时，它与同时居中的瓷砖略微不对齐。为什么会这样？这不是什么大问题，但它与它下方的方形瓷砖对齐，看起来很糟糕，所有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;
}

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

居中的div是偏离中心的？

1 个答案: