Как разместить по центру 3 блока div с float: left?

Question

[Игорь Николаев]

Всем доброго времени суток. Возникла проблемка с центрированием блоков. Собственно вот сайт teh-mehanika.ru. Нужно чтобы три блока встали по середине. Использую float: left. Кто может помогите, третий день уже бьюсь.
Вот стили css и html, в css много чего лишнего наворотил пока пытался решить проблемку, так что извиняйте)
.row {
position: relative;
width: 100%;
padding: 20px;
}

.col-lg-4 {
display: block;
}

.steps .step {
float: left;
position: relative;
margin-top: 30px;
margin-right: 34px;
margin-left: 34px;

}
.steps .step .step_wrapper {
display: block;
position: relative;
border: 3px solid #a9cc60;
border-radius: 25px;
text-align: left;
height: 190px;
width: 170px;
padding: 20px;
}
.steps .step .step_wrapper .step_wrapper__icon {
display: block;
width: 54px;
height: 59px;
position: absolute;
top: -26px;
left: -32px;
background: url(/images/how-list-icon.png);
background-size: cover;
text-align: center;
line-height: 50px;
text-indent: 8px;
font-size: 25px;
font-weight: bold;
color: #ffffff;
}

 Скачайте решение всего за три шага

1
Выберите самостоя­тельную работу, реше­ние которой хотите скачать, в разделе Ва­рианты

2
Посмотрите подроб­ную информацию, о выбранной самостоя­тельной работе, нажав на кнопку

3
Нажмите для того, чтобы перей­ти на страницу загруз­ки

Answer 1

[Алексей Николаев]

Если три блока зафлоачены, их не выровнять по центру без лютых костылей. Используйте хотя бы display: inline-block, и text-align: center у обертки этих блоков.

Comments

[profesor08]

На счет первого вы ошибаетесь, а второго недостаточно.

Answer 2

[profesor08]

Для контейнера задать фиксированную ширину (width: 912px;) и автоматический отступ (margin: 0 auto;).
<div class="steps row">

Через media можете играть с шириной контейнера. Расчеты такие:
Ширина внутренних блоков, учитывая все отступы, 304px.
912px = 304px * 3
Для двух колонок, ширина контейнера, будет 608px.
Для одной колонки 304px.

Answer 3

[Василь Бойко]

https://jsfiddle.net/my6wbrt9/

Answer 4

[novrm]

Вместо

.row {
    margin-left: -30px;
}

Попробуй:

.row {
    margin-left: 150px;
}

Конечно это похоже на костыль... Однако - решение...
С другой стороны - зачем паришь мозг такими решениями в css...
Перейди, например, на сетку bootstrap и живи спокойно.