Как выравнивать несколько элементов в строке, при смене размера экрана?

Question

[Baxterok]

Здравствуйте. Верстаю адаптивный дизайн.
Есть несколько таких блоков. Они все прижаты к левому краю. Как сделать, что бы они были по центру?
Спасибо.
P.S. Bootstrap, не предлагать. Поздно.

Answer 1

[Алексей Уколов]

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    width: 170px;
    text-align: center;    
}
.child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: black;
    border-radius: 50%;
}

Посмотреть вживую.

Ну или стильный, модный, молодежный flexbox:

.parent {
    width: 170px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.child {
    width: 50px;
    height: 50px;
    background: black;
    border-radius: 50%;
}

Поиграться.

Answer 2

[Алексей]

Выравнивай либо процентами ширину и марджини/паддинги, или делай медиакверями переходы значений при изменении ширины экрана. там можно помиграться position
.parent {
width: 100%;
}
.child {
width: 30%;
margin-left: 2.5%;
height: auto;
background: black;
border-radius: 50%;
}