CSS：垂直居中的IMG，在静态定位的div内具有不同的高度/宽度_Css_Vertical Alignment

CSS：垂直居中的IMG，在静态定位的div内具有不同的高度/宽度

css

CSS：垂直居中的IMG，在静态定位的div内具有不同的高度/宽度,css,vertical-alignment,Css,Vertical Alignment,这完全难住我了。我对CSS&DIVs很陌生，所以请容忍我我正在尝试制作一个基于DIV的图像库布局如下 <div id="container"> <div class="row"> <div class="img-container"> img </div> ...more img-containers </div> ...more rows </div> img …更多img容器 …更多行这些图像都是缩略图形式，

这完全难住我了。我对CSS&DIVs很陌生，所以请容忍我

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

布局如下

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


img
…更多img容器
…更多行

这些图像都是缩略图形式，但缩略图大小不同（但都小于150x150px），这似乎排除了我找到的所有垂直对齐解决方案，尤其是当结合行div和容器静态定位的事实时

如果以前有人问过这个问题，我很抱歉，但我已经在这个网站和谷歌上搜索了几个小时，没有找到任何有效的方法

提前感谢您的帮助

编辑3：作为参考，我正在工作的网站如下：

EDIT1:@Robert:谢谢你的建议。改变了。不过，我认为你建议的垂直居中方法行不通。由于图像大小相同，因此填充和边距将它们居中。我的身高都不一样

EDIT2:@哪儿都没有：这是我第一次尝试的。据我所知，它不起作用，因为包含div的位置不是绝对的。但是我不知道。

我将使用浮动行div中的每个图像容器和自动居中图像容器的组合

我可以这样做。如果您计划在文档中多次使用div，我建议您将任何div id更改为div类

<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            background-color: #666;
            text-align: center;
        }

        #container {
            background-color: #fff;
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
            padding: 10px;
        }

        .row {
            clear: both;
            padding: 15px 0;
        }

        .img-container {
            float: left;
            width: 33%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div>
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div>
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div> 

    </div>
</body>


身体{
背景色：#666；
文本对齐：居中；
}
#容器{
背景色：#fff；
宽度：960px；
保证金：0自动；
溢出：隐藏；
填充：10px；
}
.行{
明确：两者皆有；
填充：15px0；
}
.img集装箱{
浮动：左；
宽度：33%；
}

.img容器img{vertical align:middle；}

对于不同高度和宽度的图像非常适合我。它们的垂直中心正确对齐

如果你在CSS中没有找到一个解决方案，你可能想考虑一个程序从现有缩略图生成图像：你把它们转换成最大的图像，用透明边界（以支持PNG透明的格式）包围较小的图像。