2

关于这个主题已经发布了很多问题，很抱歉发布另一个问题。但是，其他提到我的情况的人——垂直对齐一排未定义高度的图像，而不是单个图像——都没有收到完成我需要做的事情的回复。据我所知，Kizu 的第一个解决方案是：如何在 div 中垂直对齐图像，但可惜我无法让它工作。

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

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

在这种情况下，我不能使用背景图像（图像被放置在文本小部件中以便于替换）。据我所知，我也不能在容器 div 上使用 display: table 并在我的图像上使用 display: table 单元格，因为表格单元格必须具有定义的高度，并且我的图像具有不同的高度。

这是我的代码——我有几个额外的 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;
}

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

4

0 回答 0