javascript - 将 topLeft、topRight、bottomLeft 和 bottomRight id 的内容居中

Question

我正在尝试创建一个响应式网站(调整浏览器窗口的大小以查看更改)，但我无法将这些格子 div 居中。

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

div 是动态创建的，并附加到四个“容器”div(#topLeft、#topRight、#bottomLeft 和#bottomRight)之一。

我试过使用 margin-left:auto;和 margin-right:auto 在各种元素上，但这没有帮助。

请帮助我将#topLeft、#topRight、#bottomLeft 和#bottomRight div 水平居中。我更喜欢纯 CSS 解决方案，但如果它不可行，我也可以调整 js。

Answer 1

有很多不同的方法可以通过对构建该结构的方式进行一些调整来实现这一点。这是我要做的:

首先，将事物的大小调整得更正常一些；制作象限(例如 #topLeft)width: 100%和各个正方形尺寸 padding: 5% .这将使正方形的大小与它们当前的大小相同，但 100% 的宽度可确保事物实际上居中于您希望它们所在的位置。在 200% 时，象限的“中心”将偏离 50%。

接下来，不使用 float和 clear , 使用 display: inline-block在广场上。这将使他们一起在一条线上运行；您的 Javascript 可以通过插入 <br> 来手动分解它们每 5 个方格后。您将不再需要添加 clearBoth完成后上课。

在这一点上，您应该几乎完全拥有您想要的东西。但是，每行正方形之间会有一些额外的间距。这是由于 HTML 中的空白，为了摆脱它，只需设置确保象限(再次，例如 #topLeft)有 font-size: 0。设置。

应该可以了!

解释

这真的很简单:display: inline-block服从文本对齐。通过用 inline-block 创建棋盘元素而不是 float ，您可以通过更改 text-align 来控制它们对齐到哪一侧.

所有其他的东西只是一些必要的清理工作，以使这项技术很好地工作。