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

发布于 2024-11-25 07:34:56 字数 792 浏览 1 评论 0原文

这完全难住了我。我对 CSS 和 CSS 还很陌生。 DIV,所以请耐心等待。

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

布局如下......

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

图像都是缩略图形式,但缩略图大小不同(但都小于150x150px),这似乎排除了我发现的所有垂直对齐解决方案,特别是与事实上,行 div 和容器是静态定位的。

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

预先感谢您的任何帮助!

EDIT3:作为参考,我正在开发的网站在这里: http://utsa.edu /honors/?page=international/china_new

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

编辑2:@Nowhere:这是我尝试的第一件事。据我所知,它不起作用,因为包含的 DIV 不是绝对定位的。但我不知道。

This is completely stumping me. I'm pretty new to CSS & DIVs so please bear with me.

I'm trying to make a DIV-based image gallery.

The layout is as follows...

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

The images are all in thumbnail form but the thumbnails vary in size (but all less than 150x150px) which seems to rule out all of the vertical-align solutions I've found, especially when combined with the fact that the row divs and the container are statically positioned.

I'm sorry if this has been asked somewhere before but I have looked through both this site and Google for hours and haven't found anything that seems to work.

Thanks in advance for any help!

EDIT3: For reference, the site I'm working on is here: http://utsa.edu/honors/?page=international/china_new

EDIT1: @Robert: Thanks for the class/id suggestion. Changed that. I don't believe the vertical centering you suggested is going to work though. Since your images are all the same size the padding & margins center them. Mine are all different heights.

EDIT2: @Nowhere: That was the first thing I tried. From what I've read, it's not working because the containing DIVs aren't positioned absolute. I don't know though.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

止于盛夏 2024-12-02 07:34:56

.img-container img {vertical-align: middle ;} 对于我来说,处理不同高度和宽度的图像效果很好。它们的垂直中心正确对齐...

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

.img-container img {vertical-align: middle ;} works fine for me with images of different heights and widths. Their vertical centers are correctly aligned...

If you don't find a solution within CSS, you might want to consider having a program generate images from the existing thumbnails: you convert them to images of the size of the biggest ones, surrounding the smaller ones with a transparent border (in a format that supports transparency like PNG).

超可爱的懒熊 2024-12-02 07:34:56

我将使用浮动行 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>

I would use a combination of floating each image container left within the row div and auto center the images within the image container.

Here's how I might do it. I recommend you change any div id to a div class if you plan on using it more than once in your document.

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文