如何让div垂直居中对齐？

Question

我用 bootstrap 3 创建了这一行：

<div class="cart">
<div class="row border">
  <div class="col-md-8 desc pad itemsheight">
    <div class="col-md-12">
      <!-- react-text: 141 -->Docos
      <!-- /react-text -->
      <!-- react-text: 142 -->channel package
      <!-- /react-text -->
    </div>
    <div class="col-md-12 small"><a href="">Change</a>
      <!-- react-text: 145 -->|
      <!-- /react-text --><a href="">Remove</a></div>
  </div>
  <div class="col-md-2 desc grey pad itemsheight"></div>
  <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div>
</div>
  </div>

问题是文本没有在中间垂直对齐。我尝试使用垂直对齐但不起作用？这是另一个示例： http: //codepen.io/gekkerkanniet/pen/jVKoyR

Answer 1

我使用柔性显示来垂直对齐内容。

.vCenterItems {
    display: flex;
    align-items: center;
}

还删除了每个单独元素的高度并仅应用于父元素。这将更容易改变高度。

查看实际效果