Я хотел бы центрировать "сетку" элементов, которые при изменении размера настраиваются, чтобы центрировать себя.
Вот так:
___________________
| |
| [] [] [] [] |
| [] [] [] [] |
| [] [] [] |
-------------------
________________
| |
| [] [] [] |
| [] [] [] |
| [] [] [] |
| [] [] |
----------------
_____________
| |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] |
-------------
Я попытался установить max-width
, но это приводит к этой проблеме при изменении размера:
________________
| |
| [] [] [] |
| [] [] [] |
| [] [] [] |
| [] [] |
----------------
_____________
| |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] |
-------------
Я не рассматриваю использование медиа-запросов и жесткую настройку widths
(или даже max-widths
) для каждой конфигурации - это реальное решение.
Я открыт для CSS3, пока он изящно деградирует, и хотел бы избежать javascript.
Изменить: Добавление не-семантических элементов также является выключателем транзакции, контейнером div
или что-то будет проходимым, но не идеальным.
Разметка должна быть следующей:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Вот вам demo, чтобы вы начали.
Спасибо.