[Нужна помощь!] Проблема в CSS с выравниванием!

[Raiz]

Добрый день!

Может кто нибудь объяснить мне, не смышленому верстальщику-новичку, как мне выравнить текст по центру картинок?

Я уже все перепробывал,но что то не клеится((

на первом скрине я отразил суть проблемы, а на втором то, как это должно быть по макету!
(я заменил одну картинку, т.к. это не особо важно, но сути это не меняет)

в html я объединил это все (картинки\текст) в один див и дал ему класс.
далее я дал класс всем текстовым материалам и ид для каждой картинки, дабы сделать более гибкую настройку, но все пошло не по плану.
 

в CSS класс текста выглядит так:

.contenttext {
    display: inline-block;
    font-family: 'Raleway', Arial, sans-serif;
    margin-top: 60px;
    font-weight: 500;
    font-size: 130%;
}

Видимо задавать margin-top: 60px; вообще лишнее, по скольку вместе с текстом перемещаются и картинки. Парюсь уже битый час над этим.
Если кто сможет, подскажите, что можно предпринять для разрешения проблемы.

 

[klierik]

Вариант №1: https://jsfiddle.net/1c8w33sL/

Вариант №2: https://jsfiddle.net/1c8w33sL/1/

[Raiz]

53 минуты назад, klierik сказал:

Вариант №1: https://jsfiddle.net/1c8w33sL/

Вариант №2: https://jsfiddle.net/1c8w33sL/1/

Огромное спасибо!
Проблема решена с помощью второго варианта!