Vertically aligning an image in a div

Hi Folks

I’m sat here going absolutely nuts here this evening as I try to figure out how on earth to get an image to be vertically aligned within its parent div:

http://dev.tenthtime.com/family/baby-monitors/default.aspx

I’m referring to the small product images within .product-image. Could someone please point me in the right direction as none of the tutorials I follow seem to work.

Thanks, massively, in advance. :slight_smile:

Alright, your boxes are currently 131px, but the inside box is 110px, so if you set


.prodlist .product-image span.photo {
  display:table-cell;
  height:110px;
  width:110px;
  position:absolute;
  left:10px;
  top:10px;
  vertical-align:middle;
}

This will make your span.photo equal to the size of the inside square.

Next,


.prodlist .product-image span img {
  display:block;
  max-height:90%;
  margin: 5% auto;
}

By setting the 90%, you max out how high the image can be. Then you take (100% - that value) / 2 that’s what your top and bottom margins should be.
The left and right auto margin will center it horizontally.

Note that I’m unsure how this will function if you place something that is wider than it is tall, but if you also add a max-width: 90%, I think it should work, you just may end up having images with distorted proportions.

There are different ways of doing it. This is one of them:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
* { /* For test only */
	margin: 0;
	padding: 0;	
}
.container {
	width: 600px;
	height: 400px;
	margin: 0 auto;
	margin-top: 100px;
	position: relative;
	border: #000 solid 1px;
		
}

.container .img {/* This div is as an example You can use the same method for your image */
	width: 300px;
	height: 200px;
	position: absolute;
	left: 50%; /* horizontal center container */
	top: 50%; /* vertical center container */
	margin: -100px 0 0 -150px; /* pull image back in (center) position using negative left and top margins. Note margins are half the width and height */ 
	background: #FF0000;	
}
</style>
</head>

<body>

<div class="container">

<div class="img"></div>

</div>

</body>
</html>

I hope this is what you mean

Thanks for your help guys!

Materialdesigner - I read your post first and have implemented your code tweaks which work a treat with the exception, surprise surprise, of IE6.

Any idea how I can tidy it up? As this is a commercial site I can’t afford for even 5% of visitors to have a ‘messed up’ experience.

Hmmm. I’m unsure what IE6 would get caught on, but as I don’t support IE6 in my development, I am REALLY REALLY rusty on IE6 bugs. Sorry about that :\

But as a sidenote, please give my regards to whoever designed that website. It’s beautiful, IMO.

I could do with some larger text, but that’s my opinion.

No worries, I may have some other options for IE6. One other thing I’ve just noticed is that it doesn’t seem to work where I have smaller thumbnail images:

http://dev.tenthtime.com/family/highchairs/default.aspx

Any ideas?

P.S. Thanks for the kind feedback about the site.

Oh, also, the words “Alphabetical Index” are spelled “Aplhabetical Index”

About the smaller images. I figured that would happen, but was unsure if you were going to be using images smaller than that.

Hmm…
Without static sized items, I’m unsure how to do this without using javascript.

You can force the images to be 90% height, with height: 90%, and a max-width, but then you get grainy images for your smaller images that are resized up.

If you wanted, you could force 90% height, and then in javascript, override that rule and make a more elegant solution. This would give a (not pretty, but useable) default for users with js disabled, and would provide progressive enhancement for users with js.

Thanks again!

I’ve managed to work out a way to do this (with the exception of IE6, which I’ll worry about later) although I do still have an issue in IE8:

http://dev.tenthtime.com/electronics/televisions/default.aspx

  1. Broken images seem to break the layout for some reason. Of course in an ideal world I wouldn’t have broken images, however I don’t control or host the photos so its something I have to live with.

  2. For some reason, when hovering over the links over the images I get a weird flicker and cannot click the link in some areas of the <a>.

Any ideas?

Here’s a slightly simpler method that works in ie5.5. and upwards

http://www.pmob.co.uk/temp/caption152.htm

I added some fixes for older browsers but Gary explains the main method here. The only downside is the extra b element needed for the vertical centering.