Техника, используемая в принятом ответе, работает только для однострочного текста ( demo ), но не для многострочного текста ( demo ) - как отмечено там.
Если кому-то нужно вертикально центрировать многострочный текст на изображение, вот несколько способов (методы 1 и 2, вдохновленные этой статьей CSS-Tricks )
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
CSS (вышеупомянутая скрипта содержит префиксы поставщика):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}