Center inline-blocks keeping text-align left

问题

I have a group of items. Is it possible to center the whole group but make sure items on new lines appear on the left and not the center?

Here is the example: http://codepen.io/anon/pen/yczku/

And this is what I need: 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.

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.

Edit:

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.

回答1:

if you add the correct margin or padding to ul container, it should be fine : http://codepen.io/anon/pen/Drtoa/

* {
  margin: 0;
  padding: 0;
}

.container {
  border: 5px solid red;
  width: 800px; /* Will be dynamic! */
  margin: 0 auto;
}

ul {
  margin:0 100px;
}

li {
  border: 5px solid green;
  width: 200px;
  height: 200px;
  display: inline-block;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

回答2:

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;
}

来源：https://stackoverflow.com/questions/23037195/center-inline-blocks-keeping-text-align-left

标签

html

center

css

text-align