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

但我希望它能垂直居中，所以它看起来像：

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

我尝试通过CSS垂直对齐所有内容，但除非我使用表格，否则这种方法无法正常工作。所以无论如何我可以在不使用表格行的情况下获得所需的效果吗？

更新1

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

Answer 1

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

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

见这里：http://phrogz.net/CSS/vertical-align/index.html

Answer 2

ul.seznam {margin: 0px; padding: 15px 0px 15px 15px; list-style: none;}
li.bod {color: #502945; font: normal 13px/21x Tahoma; 
margin: 0px 0px 0px 70px; padding: 0px 0px 2px 25px; 
background: url(components/bod_odrazka.png) left no-repeat;}

Answer 3

将vertical-align: middle;添加到.footer-logos img：

.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;}

也就是说，您应该在每个width元素中设置一个固定的height和<img>，以避免在页面加载过程中整个内容跳跃。

如何在列表或div中垂直对齐图像？

3 个答案: