如何＆＃34;收缩包装＆＃34;围着它的漂浮儿童

Question

我正在购物车网站上工作并尝试使搜索结果具有响应性。任何低于桌面分辨率的东西我都希望结果能够容纳多少项目（大多数情况下为3），我希望它们居中，一直到手机。

我遇到的问题是，我似乎无法让父div与其子项具有相同的宽度，也无法将其居中。

我尝试了display: inline-block并为div提供了维度，但它占据了宽度的100％。

这是我正在运行的一个例子：

http://jsfiddle.net/0jnjum30/1/

以前有人做过这样的事吗？如果可能的话，我想在CSS中完全这样做。

Answer 1

那是因为内联元素没有宽度。你应该让你的孩子成为内联块而不是父母。一旦你的父母有一个宽度，你就可以把它放在中心位置。

.parent {
    margin: 0 auto;
    text-align: center;
    width: 300px;
    display: block;    
}

.child {
   display: inline-block;
   width: 100px;
}

如果更新你的小提琴：http://jsfiddle.net/gez46x0b/1/额外的包装是必要的，以便有一个居中的列表，其中最后一个元素左对齐。