Как выровнить текст относительно центра картинки?

Question

[Сергей]

Добрый день.

codepen.io/hlopka/pen/gmNPaN

Текст справа должен быть по центру картинки слева. Как правильно сделать?

PS. Правильно ли я использовал float?

Answer 1

[Денис Клепко]

В 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;
}

Comments

[Сергей]

Спасибо!

Answer 2

[Сергей Горячев]

Слишком популярный вопрос, чтобы каждый раз писать код.

6 методов вертикального центрирования с помощью CSS .
ruseller.com/lessons.php?id=1248

Так как статья старая, в нее не добавлен Flexbox.
Это будет 7 способ flexbox.help