将内联块DIV放置在DIV容器内（没有flexbox）

Question

我正在尝试垂直放置两个div（1＆2），并将其设置为“ display：inline-block ”。无法理解为什么垂直对齐不起作用？

Ps。不想使用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>

Answer 1

由于尚未设置DIV的高度，因此无法正常工作！设置DIV的高度后，另一对垂直对齐开始工作。

Answer 2

.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并给出 display：table ，对于直接子集 display：table-cell 然后给出 vertical-align：middle; < / strong>。请查看代码。