CSS: vertically centering imgs with varied height/width inside a statically positioned 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'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>
加载中,请稍侯......
精彩评论