0

我正在尝试创建一个响应式站点（调整浏览器窗口的大小以查看更改），但我无法将这些方格 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 调整。

4

1 回答 1

1

通过对构建结构的方式进行一些调整，有很多不同的方法可以做到这一点。这是我要做的：

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

接下来，不要使用floatand clear，而是使用display: inline-block正方形。这将使它们全部一起运行在一条线上；<br>您的 Javascript 可以通过在每 5 个方格后插入一个来手动分解它们。完成此操作后，您将不再需要添加clearBoth课程。

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

应该这样做！

解释

这真的很简单：display: inline-block遵守文本对齐。通过使用inline-block元素而不是浮点数创建棋盘格，您可以通过更改 out 来控制它们对齐到哪一侧text-align。

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

于 2013-05-01T04:25:18.057 回答