Можно ли равномерно распределить множество элементов в элементе div с изменяемой шириной.

Вотне работает пример, Если мы используем text-align: center; элементы будут центрированы, но margin: 0 auto; не работает. Я хочу сделать что-то вроде оправдания + центр:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

Контейнер будет изменяться пользователем. Одна картинка стоит 1000 слов:

Ширина контейнера (красная коробка): 100%; Таким образом, пользователь может изменить его размер (окно браузера, JS, что угодно).
<-> представляют четные пробелы. Во втором ряду <-> больше, потому что там больше места. Я смог подделать это с:

text-align:center;
word-spacing:3em;    // but any fixed value looses proportion