居中內容topLeft，topRight，bottomLeft和bottomRight ids

Question

我正在嘗試創建一個響應站點（調整瀏覽器窗口的大小以查看更改），但我無法將這些格子div居中。

http://arunmahendrakar.com/ktw/play.html

的div被動態創建和附加到四個 '容器' 的div（#topLeft，#topRight，#bottomLeft和#bottomRight）中的一個。

我已經嘗試使用margin-left：auto;和保證金的權利：自動對各種元素，但沒有幫助。

請幫助我水平居中#topLeft，#topRight，#bottomLeft和#bottomRight div。我更喜歡純粹的CSS解決方案，但如果它不可行，我也可以使用js調整。

Answer 1

有一大堆不同的方式來做到這一點，一些調整你的方式來建立該結構。這是我會做的：

首先，大小的事情有點更正常;使象限（例如#topLeft）width: 100%和單個正方形尺寸padding: 5%。這將使廣場具有與目前相同的尺寸，但100％的寬度確保事物實際居中在您希望的位置。在200％時，象限的「中心」將會下降50％。

接下來，代替使用float和clear，在正方形上使用display: inline-block。這將使他們全部在一條線上運行;您的Javascript可以通過在每5格後插入一個<br>來手動分解它們。完成此操作後，您將不再需要添加clearBoth類。

在這一點上，你應該幾乎正是你想要的。但是，每排方格之間會有一些額外的間距。這是由於HTML中的空白，爲了擺脫它，只需設置確保象限（例如#topLeft）設置了font-size: 0即可。

應該這樣做！

說明

這真的很簡單：display: inline-block服從文本對齊。通過從inline-block元素中創建棋盤而不是浮動，您可以通過更改text-align來控制它們對齊的哪一側。

所有其他的東西只是一些必要的清理工作，使這項技術很好地工作。