Размещение нескольких блоков по центру родителя

Доброго времени суток. У меня такая проблема: есть класс родитель (wrapper) и в нутри его есть блоки (figure) которые становяться по центру благодаря text-align: center. Так вот, мне нужны отступы между ними в 60px, когда я задаю блоку отступ справа, то получается все блоки сдвигаются влево (последний блок тоже имеет отступ справа).

<div class="features">
<figure>
<img src="#" alt="image"/>
<figcaption>
<p>Quisque cursus et, porttitor risus. Aliquam hendrerit nulla</p>
</figcaption>
</figure>
<figure>
<img src="#" alt="image"/>
<figcaption>
<p>Sed vel lectus. Ut sagittis, ipsum. Nullam viverra consectetuer.</p>
</figcaption>
</figure>
<figure>
<img src="#" alt="image"/>
<figcaption>
<p>Cum sociis natoque penatibus et ultrices vullam wisi ultricies</p>
</figcaption>
</figure>
</div>

Стили:
.features {
text-align: center;
font-size: 0;
}

figure {
margin-right: 53px;
display: inline-block;
width: 240px;
}

img {
padding: 10px;
border: 1px solid #e1e1e1;
}

p {
font-size: 14px;
font-family: Georgia sans-serif;
}

Очень надеюсь на помощь. (Для большего удобства: http://jsfiddle.net/gv4yhygb/)

0

Если использовать инлайн блок не принципиально, то правильней будет такой вариант

0

Ваш код выровняет блоки по центру один под одним с отступом внизу, а мне нужно, что бы блоки были в ряд по центру

0

0