Как выровнить текст относительно центра картинки?
Слишком популярный вопрос, чтобы каждый раз писать код.
6 методов вертикального центрирования с помощью CSS .
ruseller.com/lessons.php?id=1248
Так как статья старая, в нее не добавлен Flexbox.
Это будет 7 способ flexbox.help
В HTML Добавляем span к тексту<div class="table">
 <div class="first">Тут картинка</div>
 <div class="second"><span class="dd">Тут текст который должен быть центру.</span></div>
 <div class="third"></div>
 <div class="fourth"></div>
</div>
В сss к классу second добавляем display: table и центрирование. А также класс dd.first {
 background-color: blue;
 height: 300px;
 width: 300px;
 float: left;
}

.second {
 background-color: red;
 height: 300px;
 width: 300px;
 float: left;
 display: table;
 vertical-align: middle;
}
.dd {
 display: table-cell;
 vertical-align: middle;
}
.third {
 background-color: pink;
 height: 300px;
 width: 300px;
 float: left;
 clear: both;
}

.fourth {
 background-color: yellow;
 height: 300px;
 width: 300px;
 float: left;
}

.table {
 display: table;
 margin: 0 auto;
}