Как отцентрировать ряд div'ов с плавающей шириной?

Question

[Дмитрий]

Здравствуйте. Помогите решить проблему.
Есть див с фиксированной шириной в 630 пикселей. В нём предполагается выводить либо 1 элемент на ~600 пикселей, либо два по ~300 либо 3 по ~200. Проблема в том, что точные размеры заранее не известны, а jscript не допустим.
Фрагмент хтмл кода для двух элементов:

<div class="ban">
    <div class="pic">
        <img alt="" title="" src="#" width="300" height="120" border="0">
    </div>
    <div class="pic">
        <img alt="" title="" src="#" width="300" height="120" border="0">
    </div>
</div>

Добавлять к pic другие варианты стилей - не подходит по выводу (блоки с классом pic по алгоритму могут выводиться в 1 2 и 3 экземлярах).

Элементы внутри дива ban должны располагаться с одинаковыми отступами между собой и с нулевыми по краям

Answer 1

[Дмитрий]

Немного кастомизировал вариант от timtimIT
И всё заработало.

Answer 2

[Alexander Shtang]

Как насчёт флекса: codepen.io/Enclave88/pen/PPeOyK

Comments

[Дмитрий]

Спасибо за совет. Я правлю чужое а не пишу своё. Иначе обязательно использовал бы либо бутстрап либо флекс.

Answer 3

[timtimIT]

Можно так

Comments

[Дмитрий]

Большое спасибо. Вроде подходит но на сайте что то блочит такой код. Буду разбираться.

[Дмитрий]

Хотя не совсем. Не получается избавиться от отступов по краям. Я хотел использовать text-align: hustify но толку ноль

[timtimIT]

Каких отступов,нужно чтобы между картинками не было оступов?

[timtimIT]

попробуйте так