Html 如何自动展开列高度并垂直对齐其内容？

我试图将前三个col-md-1 div的高度扩展到行的最大高度，该行的最大高度由两个col-md-5扩展，并且垂直对齐其内容。我使用的是自举的网格系统

<div class="row load-container">
  <div class="col-md-1">{{Id}}</div>
  <div class="col-md-1"><img src="images/{{statusIcon Status}}" /></div>
  <div class="col-md-1"><div class="info-bubble info-bubble-small middle-align {{statusClass}}">{{Class}}</div></div>
  <div class="col-md-5 container">
    <div class="row">{{From.Name}}</div>
    <div class="row">{{From.City}} {{From.State}}, {{From.Zip}}</div>
    <div class="row">{{pickupFormatted}}</div>
  </div>
  <div class="col-md-5 container">
    <div class="row">{{To.Name}}</div>
    <div class="row">{{To.City}} {{To.State}}, {{To.Zip}}</div>
    <div class="row">{{deliveryFormatted}}</div>
    <div class="row">{{expectedFormatted}}</div>
  </div>
  <div class="col-md-1">
    {{Weight}}
  </div>
  <div class="col-md-2">
    {{Distance.text}}
  </div>
  <div class="col-md-2">
    {{Duration.text}}
  </div>
  <div class="col-md-4">

  </div>
</div>

忍者编辑： 这似乎现在起作用了

.load-container [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

---

最好使用

表格

purposes@antyrat这是我一开始试过的，但它不能很好地用于其他目的。我可以使用

表

，但是，如果不解决几个视觉问题，我将处理一打。阅读本文。下面是一个示例，说明如何在不使用表的情况下执行所需操作。

.load-container [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: middle;
}