html - 与左右 div 垂直对齐

Question

我有两个div，一个在左边，一个在右边。如果左边的描述比图片长（180px），那么图片会停留在顶部。或者，反之亦然，如果文本比图像短，则文本要在顶部对齐。

我希望两者总是在中间对齐。

我认为我需要的是display:table-cellsthen vertical-align:middle，但到目前为止我没有运气让它工作。

  <div class="span4">
   <img class="thumbnail" src="http://placehold.it/290x180" width="290" height="180" alt="Second function" />
  </div>
  <div class="span6 offset1">
    <h3>Element</h3>
    <p>Description.</p>
  </div>

Answer 1

开始看这个： 在另一个div中垂直居中一个div

采用了那里提到的一些样式元素并将其应用到这里：http: //jsfiddle.net/kgJ2M/3/

一旦我将高度值放在单独的 div 中，它就会使描述空间居中，而不是在它刚好适合的盒子内居中。

希望这个问题还不算晚。这似乎是一个普遍的问题。

.span4 {
  float:left;
}
.span6{
  height:180px;
  width:100px;
  vertical-align:middle;
  display:table-cell;
  border:1px solid blue;
}
.containerspan {
  border:1px solid green;
  height:200px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}