Я пытаюсь вертикально расположить два элемента div (1 и 2), установив значение «дисплей: встроенный блок». Не могу понять, почему не хочет работать вертикальное выравнивание?
Пс. Не хочу использовать flexbox...
<div>
<div id = "div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id = "div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>





Это не работало, так как высота DIV не была установлена! После установки высоты DIV начало работать вертикальное выравнивание другого.
.parent {
border: 1px solid red;
height: 150px;
width: 100%;
display: table;
}
.parent > * {
display: table-cell;
text-align: center;
vertical-align:middle;
}
#div1,
#div2 {
display: inline-block;
border: 1px solid blue;
}<div class = "parent">
<div>
<div id = "div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id = "div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
</div>Добавьте еще один родительский div и укажите дисплей: таблица, а для непосредственного дочернего элемента установите дисплей: таблица-ячейка, затем укажите вертикальное выравнивание: посередине;. Пожалуйста, смотрите код.
Пожалуйста, добавьте свой CSS.