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

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

Answer 2

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

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

请注意，您应该显示每个框的边框以轻松调试它们。