内联块居中，使文本向左对齐 [英] Center inline-blocks keeping text-align left

问题描述

我有一组物品。

这里是示例： http://codepen.io/anon/pen/yczku/

这就是我需要的： http://f.cl.ly/items /103O0n0h2N0n1k163E26/result.png

请注意，绿色单元格组位于红色容器的中心，但每行新行仍左对齐。

Notice the group of green cells is centered inside the red container but each new line is still left-aligned.

我应该提到解决方案一定不能依赖固定宽度（并设置固定的填充或类似的东西）。在示例中，我正在容器上使用静态宽度，以确保它在所有屏幕上都显示相同的尺寸。在我的最后一个项目中，该结构具有动态宽度。

I should mention that the solution must not rely on a fixed width (and setting a fixed padding or something like that). I am using static width on the container in the example just to make sure it appears the same size on all screens. In my final project this structure has dynamic width.

我知道使用JavaScript / jQuery可以实现所需的功能，但是我对是否存在CSS-

I know that it's possible to achieve what I need using JavaScript/jQuery, but I am interested if there exists a CSS-only solution.

编辑：

示例中的每个绿色单元格都具有静态宽度，但作为一个组在一起他们应该填满整个可用空间。因此，如果将容器变宽，则第一行将容纳3个以上的项目，反之亦然-如果将容器变窄，则每行将仅容纳2或1个项目。

Each green cell in the example has static width, but together as a group they should fill the entire available space. So if container was made wider, more than 3 items would fit in the first row and vice versa - if the container was made narrower, each row would only hold 2 or 1 item.

推荐答案

假设 li 元素将是静态宽度，则可以将以下样式添加到 ul 元素：

Assuming that the li elements will be a static width, you could just add the following style to the ul element:

ul {
  width: 630px;
  margin: 0 auto;
}

这篇关于内联块居中，使文本向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！