CSS: vertically centering imgs with varied height/width inside a statically positioned div_问答_开发者

CSS: vertically centering imgs with varied height/width inside a statically positioned div

开发者 https://www.devze.com 2023-03-22 01:41 出处：网络

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.

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'v开发者_如何学编程e 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.

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

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>