Центральная жидкостная сетка элементов без установки жесткой ширины на родительском

Я хотел бы центрировать "сетку" элементов, которые при изменении размера настраиваются, чтобы центрировать себя.

Вот так:

 ___________________
|                   |
|    [] [] [] []    |
|    [] [] [] []    |
|    [] [] []       |
 -------------------
 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    []       |
 -------------

Я попытался установить max-width, но это приводит к этой проблеме при изменении размера:

 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| []          |
 -------------

Я не рассматриваю использование медиа-запросов и жесткую настройку widths (или даже max-widths) для каждой конфигурации - это реальное решение.

Я открыт для CSS3, пока он изящно деградирует, и хотел бы избежать javascript.

Изменить: Добавление не-семантических элементов также является выключателем транзакции, контейнером div или что-то будет проходимым, но не идеальным.

Разметка должна быть следующей:

 <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
 </ul>

Вот вам demo, чтобы вы начали.

Спасибо.

Ответ 1

Все еще немного расплывчато относительно того, какие ваши точные требования предназначены для центрирования (как и в, на всех ваших иллюстрациях выше показано четное количество элементов, поэтому я не знаю, чего вы ожидаете от нечетного числа. просто добавил text-align: center к ul и достиг централизованного эффекта (http://jsfiddle.net/nR9Mk/1/), но я не знаю, ведет ли он себя так, как вы этого хотите.

Обновление. Если вы имеете дело только с четными числами и хотите, чтобы они оставались сгруппированными по два, это будет работать: http://jsfiddle.net/nR9Mk/8/.

ROUND 2. Основываясь на ваших выявленных требованиях "нечетного числа", я придумал решение, которое работает. Примечание: 1) он требует некоторой дополнительной разметки HTML, 2) вы должны установить какой-то практический предел тому, насколько широко вы хотите пойти и по-прежнему получать эффект. Здесь - это код с элементами "буфера", отображаемыми outline и здесь, с помощью схема удалена.

КРУГЛЫЙ 3. Я знаю, что вы уже приняли мой ответ, но я уже работал над этим, поэтому я решил, что все равно предлагаю. На основе вашего комментария о нарушении сделки вот измененный план, который может быть вам полезен (или кто-то еще). Это гибрид - "иногда" он толкает элементы влево (обычно, когда это было бы очень неудобно), а иногда позволяет им оставаться "вне столбца", но центрируется. Чтобы он никогда не выглядел "странным", ему дается max-width шириной в шесть столбцов.