我有以下代码显示一些图像:
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元素