html - 与右 - 左 div 垂直对齐

Question

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

我希望两者始终在中间对齐。

我想我需要的是display:table-cells然后 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

开始看这个: Vertically centering a div inside another 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;
}