如何跨越的高度设置为跨度的同一行中的最大高度？

Question

考虑下面的html代码：

<span style="display: inline-block;">
<div>Caption - to display at top</div>
<div>Picture - to display at the middle</div>
</span>
<span style="display: inline-block;">
<div>Caption - to display at top</div>
<div>Picture - to display at the middle</div>
</span>

当被示出（在一排2或3）彼此相邻的这些跨距，我想是，字幕在顶部对齐和图片在中心对齐。图片可以是不同的大小和字幕可以占据多行。例如。这里是我目前：http://probqa.com/ 这里就是我希望它看起来：这是可以做到的只是在HTML / CSS？怎么样？

或者我需要一些JavaScript的呢？什么？

Answer 1

为了把事情为中心，你可以使用这个CSS技巧：

.center{
  position: fixed;
  left: 50%; /*move the top left point of block to the center*/
  transform: translate(-50%,0%);
  margin-top:60px;
}

当你想改变两个图像或文字之间的距离改变的margin-top属性。