html - 如何垂直对齐列表或 div 中的图像？

Question

我有以下用于显示一些图像的代码:

HTML:

<div class="footer-logos">
        <ul>
            <li><img src="/sites/default/files/imagefield_thumbs/All Ears Cambodia Logo_1.png" alt="" class="first"></li>
            <li><img src="/sites/default/files/imagefield_thumbs/MLF rev.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/TAMTF A.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/unltd-logo.png" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/CECILYS HIGH RES.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/Street Child Africa.jpg" alt="" class="last"></li>     
        </ul>
</div>

CSS:

.footer-logos {text-align:center;}
.footer-logos img {margin-left:20px;margin-right:20px;}
.footer-logos img.first {}
.footer-logos img.last {}
.footer-logos ul {}
.footer-logos ul li {display: inline; list-style:none;}

这会生成如下所示的图像:

alt text http://labs.dante-studios.com/footer-logos-normal.jpg

但我希望它使 Logo 垂直居中，因此它看起来像:

alt text http://labs.dante-studios.com/footer-logos-fixed.jpg

我已经尝试通过 CSS 垂直对齐所有内容，但除非我使用表格，否则这并不奏效。所以无论如何我可以在不使用表格行的情况下获得预期的效果？

更新 1

生成的图像可以有不同的高度，因此不能使用固定高度的 css 元素...

Answer 1

图像的高度是否有固定的上限？

如果是这样，您可以将包含的 div 的 line-height 设置为该高度，然后设置 img 的 vertical-align 属性> 标记到 middle。

参见此处:http://phrogz.net/CSS/vertical-align/index.html