css - 替代宽度 :fit-content for inline-block lists with multiple lines?

Question

我正在尝试使可变数量的缩略图列表居中，同时缩略图都适合一行，但随后的行左对齐，而父元素相应地保持在页面居中。 width:fit-content 适用于一行，但当有多行时，它会达到 100% 宽度(无论如何在 mac chrome 中)。问题说明:

http://codepen.io/scotthorn/pen/eutAH?editors=110

如果有另一种方法可以实现我想要的目标，我不介意更改 css 或 html 标记的任何部分。适合该区域的背景不是必需的，在我的示例中只是为了更好地展示正在发生的事情。我的主要目标是有一个列表，其行为类似于单行内联 block 元素的居中容器，但是当必须创建第二行时，其中的第一个元素排在第一行的第一个元素下方而不是以自身为中心。

希望这是有道理的，如果没有我可以制作模型。

Answer 1

我会想象将整个东西包装在一个 div 中并以 % 宽度居中会做你想要的。但是模型可以帮助我理解。

或者您可以使用边距来压缩内部内容。