容器元素的中心对齐但保持其内容的左对齐

Question

我正在尝试创建一个KPI仪表板，其各自的显示位于各自的“图块”中，这些图块是静态的width和height（在示例中提供的是{{1} }}）。放置这些内容的网站的内容为200px，其CSS属性为<div>和margin:auto，这样做可以让宽屏用户受益于内容的宽度增加。我所追求的是要对齐的瓷砖，好像包含在一个表中，但要在瓷砖容器中居中对齐（占据80％宽度主体的整个宽度）。

我创建了一个JSFiddle here，我之前创建了一些解决方案，使用width:80%利用JQuery处理程序并以编程方式设置tile容器的$(window).resize()但是我希望可以使用纯width执行此操作以减少所需的CSS（我已经在JavaScript的页面上使用了很多并更新了显示。

如何使用纯CSS获得所需的对齐（如下图所示）？可以添加其他元素，但希望保持结构尽可能简单。

更新以澄清要求：

在我的示例中，只有3个孩子，仪表板可能有任何数字，例如，如果您要有5个图块，可按如下方式布置（取决于可用的屏幕宽度和更改页面大小） ）：

单行
• 5
• 4位于底部的第1行
• 3位于底部的第2行
• 2行2个瓷砖，第3个带一个
• 5行1个瓷砖

是的，可以通过显式定义每个元素的宽度（以像素为单位），但宽度为：

• AJAX元素必须是pageBody（通常的做法不是800px / 600px），使用的屏幕空间最大化（在一定程度上）允许宽屏用户实际看到更多而不是只在屏幕中间显示600 / 800px。
• width:80%必须在tileContainer中居中，并根据所包含的图块使用的宽度“调整大小”（这不能在pageBody中明确定义为 n 像素，因为仪表板的不同用户具有不同的屏幕尺寸，移动设备使事情变得更加有趣）。如前所述，可以通过使用CSS更改页面大小调整的宽度来实现此目的，但我正在寻找仅JQuery解决方案。
  • CSS元素将在tile
  中保持对齐

底部有图像显示所需行为。

HTML

tileContainer

CSS

3 Children:
<div class='pageBody'>
    <div class='tileContainer'>
        <div class='tile'></div>
        <div class='tile'></div>
        <div class='tile'></div>
    </div>
</div>

示例：在正文中左对齐

示例：在正文中心对齐

示例：必需的对齐

Answer 1

TylerH很接近。 我刚拿起他的小提琴并稍微修改了一下。您需要为第二个包含div添加宽度，然后您才能使用margin auto来居中。

Jsfiddle