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

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 属性。