居中的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是偏離中心的嗎？

回答

相關問題