如何使用vertical-align：middle将一行中不同高度的多个图像垂直居中

Question

关于此主题已经发布了很多问题，很抱歉发布了另一个问题。然而，没有其他人提到我的情况 - 垂直对齐一行未定义高度的图像而不是单个图像 - 已收到回复，完成了我需要做的事情。据我所知，Kizu在这里的第一个解决方案：How to vertically align an image inside div应该是事情，但唉，我无法让它发挥作用。

所以，我有一个容器div。如有必要，我可以为这个div指定一个高度。如有必要，我也可以将这个div放在另一个div中。

在div中，我想放置一排不同高度的图像。这些图像应相对于彼此垂直居中（不仅仅与容器div有关）。

在这种情况下我不能使用背景图像（图像被放置在文本小部件中以便于更换）。 据我所知，我也不能在容器div上使用display：table并在我的图像上显示：table cell，因为table cell必须有一个已定义的高度，而且我的图像具有不同的高度。

这是我的代码 - 我有几个额外的div（＃footer-single-widget和.footer-single）来实现我想要的整体居中和填充，所以我也包括这些其中一个正在影响后续的div：

<div id="footer-single-widget">
        <div class="footer-single">

       <div class="textwidget">
       <div class="media">

<img src="#image-1" width="103" height="36" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
<img src="#image-1" width="103" height="26" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />

       </div><!-- end of .textwidget -->
       </div><!-- end of .media -->

        </div><!-- end of .footer-single -->
    </div><!-- end of #footer-single-widget -->

CSS：

#footer-single-widget {
  width: 100%;
}

.footer-single {
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

#footer-single-widget .textwidget {
  display: block;
  height: 40px;
  width: 980px;
}

.media {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.media img.alignleft {
  display: inline-block;
  vertical-align: middle;
  max-height: 40px;
  max-width: 200px;
}

令人沮丧的是，在某些时候我完全达到了这个效果 - 然后决定我不需要它（我当时的所有图像都是相同的高度）并删除了我写的代码。现在我又需要它，并且对我所做的事情没有最微弱的记忆！但我知道这可能......不知何故。谢谢你的建议。