如何创建包含左对齐元素的不确定宽度的居中div？

Question

我在紫色div内的红色div内有几个统一的蓝色元素（<div style="display: inline-block;">）。 Mockup（imgur）。

我希望蓝色元素左对齐（与紫色div宽度一样多行），红色div缩小缠绕它们。但是我希望红色div在紫色div内水平居中。

我希望做一些像this（jsFiddle）这样的事情，但这只有在红色div具有指定宽度时才有效。

Answer 1

回到这个问题，我找到了一个内联CSS并没有javascript的解决方案（这是我没有提及的附加约束）。

如果这是愚蠢而且有效，那不是傻瓜！至少那是我告诉自己的。

我的解决方案是使用几个“不可见”等宽0高度内联块元素填充子元素列表的末尾。我最终不需要“红色div”来完成这个结果。

以下是我的解决方案：http://jsfiddle.net/3wVTx/8/

Answer 2

在#red上放一个保证金不起作用吗？当然，这将取决于#purple内是否还有其他内容。这不是你想要的吗？ http://jsfiddle.net/3wVTx/3/