居中的div是偏离中心的吗？

我已经有了150px div的6x4数组，每个数组都有5px的边距（想象Metro UI）。我也有一个模态分区。正方形divs全部为display: inline-block，在父div中以text-align为中心，并且在每6（为了制作6x4网格）之后有一个换行符。当我的模式（也居中，有margin）弹出时，它与中心的贴图稍微不一致。为什么会这样呢？这不会有什么大不了的，但它与它下面的方形瓷砖是一致的，并且在1-2像素关闭的情况下它看起来很可怕。 text-align: center和margin: auto会导致这种情况吗？居中的div是偏离中心的吗？

从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; 
}

来源

2012-11-15 tkbx

你的一些代码可能可以帮助你 –

你可以无忧吗？ –

也许这听起来很怪异你的描述，因为我们没有例子，但为什么你会用“文本对齐”来居中你的div元素？我会建议把它们放入一个容器中，并将其与margin：0 auto对齐。 – Bay

以此为首发：

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; 
}

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

来源

2012-11-15 14:45:18 Bay

结果'display：inline-block'而不是'float：left'是我唯一真正的问题，现在应该会更好。谢谢 – tkbx

这是一个稍微改进的版本，在模块上点击（点击容器上的任意位置）：http://jsfiddle.net/HdHRe/22/ – Bay

居中的div是偏离中心的吗？

回答

相关问题