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

【问题标题】：How to set span's height to the max height of the spans in the same row?如何将跨度的高度设置为同一行中跨度的最大高度？
【发布时间】：2019-07-01 15:36:23
【问题描述】：

考虑以下 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 吗？什么？

【问题讨论】：

标签： javascript html css layout alignment

【解决方案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 属性。

【讨论】：

这不起作用：图像只是这样出现在窗口的中心。

【解决方案2】：

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

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

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

【讨论】：