Question

I have two divs, one on the left and one on the right. If the description on the left is longer than the image (180px), then the image stays at the top. Or, vice versa, if the text is shorter than the image, than it is the text to be aligned at the top.

I would like both to be always aligned at the middle.

I think what I need is display:table-cells and then vertical-align:middle, but so far I had no luck getting this to work.

  <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

Started looking at this:
Vertically centering a div inside another div

took some of the style elements mentioned there and applied it here:
http://jsfiddle.net/kgJ2M/3/

Once I put height values in the separate divs, it gave the description room to center rather than centering inside a box that it just fit inside.

hope it’s not to late for this issue. It seems to be a common question.

.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;
}