Сжать и центрировать контейнер для элементов inline-block

У меня есть набор элементов встроенного блока на нескольких строках, которые я хотел бы центрировать по горизонтали. Все элементы встроенного блока имеют одинаковый фиксированный размер, но я бы хотел, чтобы центрирование позволяло обрабатывать изменение размера страницы и добавление или удаление элементов.

Я урезал html / css и убрал попытку центрирования для ясности. Он находится по адресу http://jsfiddle.net/fe25H/1/

Если вы измените размер окна результатов так, что третий элемент встроенного блока опустится вниз, контейнер заполнит всю ширину, и мы получим следующее:

-----------------BODY------------------
|                                     |
||-------------CONTAINER-------------||
||-INLINEBLOCK---INLINEBLOCK--       ||
|||____________||____________|       ||
||-INLINEBLOCK--                     ||
|||____________|                     ||
||___________________________________||
|_____________________________________|

вместо этого:

-----------------BODY------------------
|                                     |
|   |----------CONTAINER---------|    |
|   |-INLINEBLOCK---INLINEBLOCK--|    |
|   ||____________||____________||    |
|   |-INLINEBLOCK--              |    |
|   ||____________|              |    |
|   |____________________________|    |
|_____________________________________|

редактировать на основе ответа ptriek относительно решения JavaScript:

Код Ptriek был полезной отправной точкой; он работает для конкретного случая, но не для общего. Я в основном переписывал его, чтобы сделать его более гибким (см. http://jsfiddle.net/fe25H/5/ ).

13
задан James 31 December 2011 в 12:08
поделиться