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

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技巧：

COPY --chown=user:group source dest

要更改两个图像或文本之间的距离时，请更改margin-top属性。

Answer 2

将每个跨度框转换为table-cell，使其具有相同的框高，然后可以使用css vertical-align: middle属性轻松地将每个框内的内容对齐

<span style="display:table-cell">...</span>
<span style="display:table-cell">...</span>

请注意，您应显示每个框的边框以方便调试。