让 div 浮动，但在空间不足时保持居中

【问题标题】：Make a div floated but keep it centered when the space is not enough让 div 浮动，但在空间不足时保持居中
【发布时间】：2011-06-27 02:30:05
【问题描述】：

我想要一个类似网格的东西，当窗口上没有足够的空间容纳超过 1 个元素时，每个元素都保持居中，但是当有更多空间时，它们会浮动到左侧。有没有办法只使用 css 来实现这一点？

【问题讨论】：

你能重新表述一下这个问题吗？很难理解。
这是默认的 div 行为不是吗？

标签： jquery css layout html

【解决方案1】：

这将涉及在调整窗口大小时更改元素的 margin-left 和 margin-right 属性，这在没有 JavaScript 的情况下是不可能的。

如果没有 JavaScript，您的代码将如下所示：

<html><body style="margin:0px">
<div style="min-height: 400px; min-width: 600px; clear: both;">
<div style="margin: 10px; float: left; margin-right: 95px; margin-left: 95px;width: 400px; height: 400px; background-color: Red;"></div>
<div style="margin: 10px; float: left; margin-right: 95px; margin-left: 95px;width: 400px; height: 400px; background-color: Blue;"></div>

</div>
</body>
</html>

您可以在最小宽度的情况下使 div 居中，但您需要 JavaScript 在调整窗口大小时操作边距大小。

【讨论】：