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

Question

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

我想创造出具有各自在自己的"砖",它显示一个KPI仪表板,这些砖是静态的width,并height(在提供的例子这些200px).这些都被放在该网站有一个内容<div>与CSS属性margin:auto和width:80%,这项工作已经完成,以便与宽屏用户从内容的宽度增加中受益.我所追求的是要保持对齐的瓷砖,就好像包含在一个表格中,但要在瓷砖容器中居中对齐(占据80%宽度主体的整个宽度).

我创建了一个的jsfiddle这里,我以前创建其使用的解决方案JQuery采取的优势$(window).resize()处理器和编程设置widthTile容器但我希望这是可能做到这一点用纯的CSS,以减少JavaScript所需的(我已经在页面上使用很多AJAX并更新显示.

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

更新澄清要求:

在我的例子中,只有3个孩子,仪表板可能有任何数字,例如,如果你有5个瓷砖,它可以如下布局(取决于可用的屏幕宽度和更改页面大小):

单行5
4在底部的顶行1
3在底部的第2排
2行2个瓷砖,第3个瓷砖
5行1个瓷砖

是的,可以通过显式定义每个元素的宽度(以像素为单位),但宽度可以:

该pageBody元素必须是width:80%(不是800像素/ 600像素也是通常做法),屏幕使用的房地产最大化(在一定程度上)允许用户宽屏实际看到更多的,而不是只显示在他们的屏幕中间的600/800像素.
在tileContainer必须在居中pageBody根据由包含砖中使用的宽度,并且将"调整大小"(这不能在明确定义CSS为Ñ像素仪表板作为不同的用户具有不同的屏幕尺寸和移动设备更有趣使事情) .可以通过使用JQuery如前所述更改页面大小调整的宽度来实现此目的,但我正在寻找CSS唯一的解决方案.
- 的tile元件是内要左对齐tileContainer

底部有图像显示所需的行为.

HTML

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

Run Code Online (Sandbox Code Playgroud)

CSS

.pageBody{
    width: 80%;
    margin: auto;
    background-color:lightgrey;
}.tileContainer{
    text-align:center; /*Removing this doesn't centre the tiles in their container*/
}.tile{
    background-color:purple;
    display:inline-block;
    margin:5px;
    width: 200px;
    height: 200px;
}

Run Code Online (Sandbox Code Playgroud)

示例:在体内左对齐

瓷砖格式但在体内保持对齐