当浏览器宽度更改时，将容器保持在中间列的中心

Question

我有一个流畅的宽度布局。左列和右列具有固定宽度，我的中心列在浏览器宽度更改或屏幕分辨率更改时指定的最大和最小宽度之间更改其宽度。它看起来像下图：

正如您所看到的，中间列中有一些小容器，它们可以容纳几种产品等。

我遇到的问题是，当宽度发生变化且中间列不能容纳3个容器时，1会落在下面，因为它们是浮动的，然后它看起来像下面的东西：

现在容器右侧的这个空间看起来很难看。我想要做的是保持它们居中，如果一个在宽度减小时下降，那么两个应该出现在中间列的中心，当另一个下降然后1个容器也应该出现在中间，如下所示：

我可以只使用css吗？或者我需要引入一些脚本语言来动态地进行它？

这是容器的css，我正在使用

.prod-container{
    float: left;
    width: 180px;
    height: 290px;
    margin: 2px 6px;
    border: 1px solid black;
}

http://www.myappontest.heliohost.org/index1.html

上的示例

Answer 1

以float: left;的样式替换display: inline-block; .prod-container并将text-align: center;添加到#center-content-container的样式将实现所需的行为。

您网页的工作版本：little link。以下是修改后的CSS文件：another little link。

希望以任何方式帮助你！

Answer 2

我会将中心浮动块放在最大宽度为100％的div中（在中心列的范围内）。阻止“margin-left：auto margin-right：auto”的中心。如果没有足够的空间，这将使浮动块移动到下一行，并且居中div将根据其内容进行调整，使其在中心列中居中。