CSS:在静态定位的div中垂直居中具有不同高度/宽度的imgs

Question

这完全难倒了我。我对 CSS 和 DIV 很陌生，所以请多多包涵。

我正在尝试制作一个基于 DIV 的图片库。

布局如下...

<div id="container">
<div class="row">
<div class="img-container">
img
</div>
...more img-containers
</div>
...more rows
</div>

图像都是缩略图形式，但缩略图的大小各不相同(但都小于 150x150 像素)，这似乎排除了我发现的所有垂直对齐解决方案，尤其是结合行 div 的事实时并且容器是静态定位的。

如果之前有人问过这个问题，我很抱歉，但我已经浏览了这个网站和谷歌几个小时，但没有找到任何似乎有效的东西。

在此先感谢您的帮助!

EDIT3:作为引用，我正在处理的网站在这里:http://utsa.edu/honors/?page=international/china_new

EDIT1:@Robert:感谢您的类/ID 建议。改变了。我不相信你建议的垂直居中会起作用。由于您的图像大小相同，因此填充和边距将它们居中。我的都是不同的高度。

EDIT2:@Nowhere:这是我尝试的第一件事。从我读过的内容来看，它不起作用，因为包含的 DIV 不是绝对定位的。虽然我不知道。

Answer 1

.img-container img {vertical-align: middle ;} 适合我处理不同高度和宽度的图像。它们的垂直中心正确对齐...

如果您在 CSS 中找不到解决方案，您可能需要考虑让程序从现有缩略图生成图像:将它们转换为最大尺寸的图像，并用透明边框包围较小的图像(采用支持透明度的格式，如 PNG)。