Как выровнять по центру переносимые блоки внутри материнского?

Question

[Юрий Ерусалимский]

Допустим, имеется 5 дочерних блоков внутри материнского блока. Нужно эти блоки в случае, когда они не умещаются по длине в материнском блоке - переносить на новую строку, но так, чтобы они шли не по сетке, а как-бы центрировались.
Вот моя заготовка.
Я сделал на всякий случай два способа описания дочерних блоков, через float:left и через display:inline-block. Не знаю просто какой лучше вариант использовать. Теперь нужно, чтобы эти блоки выравнялись так:

Поправьте мой пример так, чтобы получился требуемый результат, пожалуйста. Заранее благодарю.

Answer 1

[Михаил]

https://jsfiddle.net/44L00L82/2/

Comments

[Юрий Ерусалимский]

Спасибо большое. Интересно, почему тут работает text-align, учитывая, что работаем с блоком? Я так думал, что дочерним блокам нужно было бы тогда присваивать иной display, не так ли?

[Михаил]

Игорь: условие видел?

[Михаил]

Юрий Ерусалимский: это уже не блочный элемент, а блочно-строчный.

Answer 2

[Виталий Чернильцев]

вот так frontender.info/a-guide-to-flexbox