Html 如何在列表或 div 中垂直对齐图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2180590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you vertically align images within a list or a div?
提问by Shadi Almosri
I have the following code for showing some images:
我有以下代码用于显示一些图像：
HTML:
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:
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;}
This produces images that look like:
这会产生看起来像这样的图像：
alt text http://labs.dante-studios.com/footer-logos-normal.jpg
替代文字 http://labs.dante-studios.com/footer-logos-normal.jpg
But i would like it to center the logos vertically so it looks like:
但我希望它垂直居中徽标，因此它看起来像：
alt text http://labs.dante-studios.com/footer-logos-fixed.jpg
替代文字 http://labs.dante-studios.com/footer-logos-fixed.jpg
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?
我已经尝试通过 CSS 垂直对齐所有内容，但除非我使用表格，否则这并没有真正起作用。所以无论如何我可以在不使用表格行的情况下获得所需的效果？
UPDATE 1
更新 1
The images that are produced can be of different heights, thus cannot use a fixed height css element...
生成的图像可以具有不同的高度，因此不能使用固定高度的 css 元素...
回答by Kyle Butt
Do the images have a fixed upper bound as to their height?
图像的高度是否有固定的上限？
If so you can set the line-heightof the containing div to that height, and then set vertical-alignproperty of the imgtags to middle.
如果是这样，您可以将line-height包含 div 的 设置为该高度，然后将标签的vertical-align属性设置img为middle。
回答by David
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;}
回答by BalusC
Add vertical-align: middle;to .footer-logos img:
添加vertical-align: middle;到.footer-logos img：
.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;}
That said, you should set a fixed widthand heightin each of the <img>elements to avoid the whole thing jumping up during page load.
也就是说，您应该在每个元素中设置一个固定的width和height，<img>以避免在页面加载期间整个事情跳起来。
