Position images of various size in a grid with CSS - css

Question

I have a series of images (about a 100 or so) that have been resized so that they fit in a background box that is 130x130. The images are either 130 wide or 130 high. How do I style the image so that they appear in the middle of the 130px box.
This is the effect I want to achieve: http://i.imgur.com/LY1Ag.png

Answer 1

Here's another method that has two main differences: avoids the use of background images (the use of which is semantically weird as Nightfirecat mentioned) and puts the images within an unordered list. The latter isn't necessary but is arguably follows CSS best practices.
I haven't tested extensively but on recent Firefox, Chrome and IE for PC. I had to add a hack for IE7 based on this page's suggestions. That's the reason for the empty <span> for each list item.
CSS:
<style type="text/css">
#boxes {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
}
#boxes li {
float: left;
border: 1px solid #333;
margin: 30px;
}
#boxes li div {
position: relative;
width: 130px;
height: 130px;
text-align: center;
display: block
}
#boxes li div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto
}
</style>
<!--[if IE 7]>
<style type="text/css">
#boxes li div * {
vertical-align: middle;
}
#boxes li div img {
position: relative;
}
#boxes li div span {
display: inline-block;
height: 100%;
}
</style>
<![endif]-->
HTML:
<ul id="boxes">
<li><div><span></span><img src="wide1.jpg"></div></li>
<li><div><span></span><img src="wide2.jpg"></div></li>
<li><div><span></span><img src="wide3.jpg"></div></li>
<li><div><span></span><img src="tall1.jpg"></div></li>
<li><div><span></span><img src="wide4.jpg"></div></li>
<li><div><span></span><img src="tall2.jpg"></div></li>
</ul>
Done quickly, so it's entirely possible that there are some bugs.

Answer 2

If you use them as backgrounds for a div, you're all set:
CSS:
div.box-images div {
float: left; /* has them left-align */
height: 130px;
width: 130px;
margin: 12px; /* gives them gutters in between */
background-position: 50% 50%; /* ensures they're centered */
background-repeat: no-repeat;
border: 2px solid #ccc;
}
HTML:
<div class='box-images'>
<div style='background-image: url(images/sample1.png);'></div>
<div style='background-image: url(images/sample2.png);'></div>
[etc.]
<br style='clear: both;' />
</div>

Answer 3

I personally wouldn't use background images.
I would, if possible, apply a class to each box that holds these image. the box would have set height and width as you mentioned.
Then, with jQuery or javascript, add a class depending on the images height or width. so if the width is 130px, add the class of top and bottom padding. If the image is 130 high, add the left and right padding class.
Hope this makes sense and helps you. Let me know if you need me to elaborate.

Answer 4

Although I only tested in fx, chrome and IE9 but you can use vertical-align: middle + line-height: 130px on the image like this:
css:
div.box {
width: 130px;
height: 130px;
text-align: center;
line-height: 130px;
}
div.box img {
vertical-align:middle;
}
html
<div class="box">
<img src="image1.jpg">
</div>
<div class="box">
<img src="image2.jpg">
</div>
I'm getting a little bit of a push though, when the image is the same height as the box. Anyone else know why? You can see it here: http://jsfiddle.net/9bu5Z/1/