html – 如何垂直对齐列表或div中的图像?

前端之家收集整理的这篇文章主要介绍了html – 如何垂直对齐列表或div中的图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下代码显示一些图像:

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元素

解决方法

图像的高度有固定的上限吗?

如果是这样,可以将包含div的线高设置为该高度,然后将img标签的vertical-align属性设置为中间.

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

原文链接:https://www.f2er.com/html/230119.html

猜你在找的HTML相关文章