vertically center an image in a "gallery"

[HookedOnWinter]

Another question today. Woo!

Alright, so I have these images that maybe be different sizes. There's going to be PHP, so no telling what the sizes will be. At max they will be 100x100, but they could be 95x100, 73x68, etc. I've got them centered horizontally, but not vertically. Check it out: www.hookedonwinter.com/newdesign
here's some relevant code:

CSS:

.thumbnail{
	float:left;
	width:106px;
	height:106px;
	margin: 15px 31px;
	text-align:center;
}

.thumbnail img{
	border:3px solid #122D5A;
/*this is probably where I need an auto margin or something, I just can't figure it out...*/
}

			<div class="thumbnail">
			<img src="images/myteamplaceholder.png" alt="MyTeam">
			</div>
			
			<div class="thumbnail">
			<img src="images/placeholder.png" alt="MyTeam">
			</div>
			
			<div class="thumbnail">
			<img src="images/myteamplaceholder.png" alt="MyTeam">
			</div>
			
			<div class="thumbnail">
			<img src="images/myteamplaceholder.png" alt="MyTeam">
			</div>

the second image is smaller than the rest (75x75 rather than 100x100), and it is vertically aligned to the top. I want it in the middle. ideas? Thanks,

PJ

p.s. Graeme - thanks for your help on the text selecting problem. Worked great!

[agrestik]

Hi HookedOnWinter,

Add the text in bold to the .thumbnail class

.thumbnail{
	float:left;
	width:106px;
	height:106px;
	margin: 15px 31px;
	text-align:center;
	vertical-align:middle;
}

[HookedOnWinter]

isn't that for inline objects? i'm using block objects here...

and it didn't work.. thanks though

[HookedOnWinter]

bump, still can't figure it out..

[HookedOnWinter]

bump. anyone?

[toicontien]

I ran into this same problem at Motortopia.com. My solution was fairly easy, which I'll adapt to your markup.

.thumbnail {
 float: left;
 height: 100px;
 position; relative;
 width: 100px;
}

.thumbnail .thumbBox {
 left: 0;
 position: absolute;
 text-align: center;
 top: 50%;
 width: 100px;
}

.thumbnail .thumbBox img {
 vertical-align: bottom;
}

Now the HTML:

<div class="thumbnail">
  <div class="thumbBox" style="height: [image height]px; margin-top: -[Half of this image's height]px;"><img ...></div>
</div>

The downside is it does require you to know the dimensions of each image, which you can get with a PHP function -- http://us2.php.net/manual/en/function.getimagesize.php

[HookedOnWinter]

awesome, thank you! i'll play with this next week. Thanks!