html页面居左,html – 容器元素的中心对齐,但保持其内容的左对齐

我正在尝试创建一个KPI仪表板,其每个显示器都有自己的“瓷砖”,这些瓷砖具有静态宽度和高度(在示例中提供的这些是200px).放置这些内容的网站的内容位于< div>中. CSS属性边距：自动和宽度：80％,这样做可以让宽屏用户从增加的内容宽度中受益.我所追求的是要保持对齐的瓷砖,就好像包含在一个表格中,但要在瓷砖容器中居中对齐(占据80％宽度主体的整个宽度).

我创建了一个JSFiddle here,我之前已经创建了一些解决方案,它们使用JQuery利用$(window).resize()处理程序并以编程方式设置tile容器的宽度但是我希望可以用pure来做到这一点CSS减少了所需的JavaScript(我已经在页面上使用了很多AJAX和更新显示.

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

更新澄清要求：

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

单排> 5

底部顶行1上> 4

> 3在底部的顶行2上

> 2行2个瓷砖,第3个瓷砖

> 5行1个瓷砖

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

> pageBody元素必须是宽度：80％(不是800px / 600px,这是常见的做法),使用的屏幕空间最大化(在一定程度上)允许宽屏用户实际看到更多而不是仅显示600 / 800px他们的屏幕中间.

> tileContainer必须在pageBody中居中,并根据所包含的tile使用的宽度“调整大小”(这不能在CSS中明确定义为n像素,因为仪表板的不同用户具有不同的屏幕尺寸和移动设备制作的东西更有趣).可以通过如前所述使用JQuery更改页面大小调整的宽度来实现此目的,但我正在寻找仅CSS解决方案.

> tile元素将在tileContainer中左对齐

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

HTML

3 Children:

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;

}

示例：在体内左对齐

示例：在体内对齐

示例：必需的对齐方式