将内联块 DIV 定位在 DIV 容器内（没有 flexbox）答案

【问题标题】：positioning inline-block DIV`s inside a DIV container (without flexbox)将内联块 DIV 定位在 DIV 容器内（没有 flexbox）
【发布时间】：2019-06-08 21:36:00
【问题描述】：

我正在尝试垂直定位两个 div (1&2)，设置为 'display: inline-block'。不明白为什么垂直对齐不想工作？

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

【问题讨论】：

请添加您的 CSS。

标签： html css

【解决方案1】：

.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;。请看代码。

【讨论】：

【解决方案2】：

由于DIV的高度没有设置，它没有工作！设置 DIV 的高度后，其他的垂直对齐开始工作。

【讨论】：