如何在列表或div中垂直对齐图像？ [英] How do you vertically align images within a list or a div?

问题描述

我有以下代码显示一些图片：

I have the following code for showing some images:

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;}

这会生成如下的图像：

但我想它垂直的中心标志，它看起来像：

But i would like it to center the logos vertically so it looks like:

我试着通过CSS垂直对齐所有东西， 'm使用表。那么无论如何我可以得到想要的效果而不使用表格行？

I've tried vertically aligning everything through CSS but that doesn't really work unless i'm using a table. So anyway i can get the desired effect without using a table row?

UPDATE 1

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

The images that are produced can be of different heights, thus cannot use a fixed height css element...

推荐答案

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

If so you can set the line-height of the containing div to that height, and then set vertical-align property of the img tags to middle.

请参阅： http://phrogz.net/CSS/vertical-align/index.html

这篇关于如何在列表或div中垂直对齐图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！