Как вертикально отцентрировать текст в теге, который находится в div?

Question

[buzzloud]

Привет, подскажите как можно вертикально отцентрировать текст в теге , который находится в div? Без флексов.
Структура html такая:

<li class="advantages__items">
            
               <div class="advantages__img">
                <img src="/img/adv-1.jpg" alt="Наши преимущества">
            </div>
            
            <div class="advantages__descr">
                    <p class="advantages__text">Это текст, который лежит в <p> и хочет быть вертикально по центру своего div'а</p>
            </div>
 </li>

Т.е. есть два блока, в первом картинка, во втором текст в параграфе и он же находится в div. Как сделать так чтобы вертикально параграф - текст был по центру. Без использования флексов и line-height. Спасибо заранее.

Answer 1

[Олег]

.advantages__descr {
	height: 10em;
}
.advantages__descr:after {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em;
}

.advantages__text {
	display: inline-block;
	vertical-align: middle;
}

Answer 2

[Андрей Федоров]

.advantages__img,
.advantages__descr {
  display: table-cell;
  vertical-align: middle;
}

Answer 3

[afishr]

На css-tricks есть отличная статья о центрировании элементов