Como espaçar uniformemente muitos elementos de bloco inline?

É possível espaçar uniformemente muitos elementos em um div com largura variável.

Aquiexemplo não funciona. Se usarmos text-align: center; elementos serão centralizados, mas margin: 0 auto; não está funcionando. Eu quero realizar algo como justificar + centro:

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

O contêiner será redimensionável pelo usuário. Uma imagem vale mais que 1000 palavras:

Largura do contentor (caixa vermelha): 100%; Então o usuário pode redimensioná-lo (janela do navegador, js, o que for).
<-> representa espaços pares. Na segunda linha <-> são maiores porque há mais espaço. Eu era capaz de fingir com:

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

questionAnswers(3)

yourAnswerToTheQuestion