Question

这完全让我感到难过。我对CSS＆amp; DIV所以请耐心等待。

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

布局如下......

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

图像都是缩略图形式，但缩略图大小不一（但都小于150x150px），这似乎排除了我找到的所有垂直对齐解决方案，特别是当与行divs相结合时并且容器静态定位。

我很抱歉，如果以前曾在某处询问过这个问题，但我已经浏览了这个网站和谷歌几个小时，但没有发现任何似乎有用的东西。

提前感谢您的帮助！

EDIT3：作为参考，我正在处理的网站位于：http://utsa.edu/honors/?page=international/china_new

EDIT1：@Robert：感谢class / id建议。改变了。我不相信你建议的垂直居中可行。由于你的图像都是相同大小的填充和＆amp;利润中心。我的都是不同的高度。

EDIT2：@Nowhere：这是我尝试过的第一件事。从我所读到的，它不起作用，因为包含DIV不是绝对的。我不知道。

Answer 1

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

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

Answer 2

我会使用漂浮在行div中的每个图像容器的组合，并自动将图像放在图像容器中。

这是我如何做到的。如果您计划在文档中多次使用div ID，我建议您将任何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>

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

2 个答案: