I had six items that I wanted to centre horizontally via CSS. Problem was that depending on the viewport width, the items could either take one, two, three or six lines. But the items broke to the next line like text so that e.g. the top line had five items and the second only one. What I wanted was three items each in this case.

Finally, I came up with a hack of media queries to make the parent container just so wide that six, three, two or one item would fit horizontally, and then centre the parent container with margin left/right auto.

Add Comment