0

I see loads of fixes for this..

But our issue is absolute positioning of the image within the container div.

Our images can be of any size ( within reason - php can resize as necessary but scaled proportionally ) so we have max width and height of our image set.

Example: html

<a id="product_image_preview"  href="item.php"><img id="image" class="preloader" src="images/products/oakbookcase.jpg" title="Product Title" alt="Product Title" /></a>

Our css to handle this is:

Example css:

#product_image_preview { width:260px;height:140px;border:1px solid     #aaaaaa;position:relative;line-height:140px;}
#product_image_preview #image {margin:0px auto;vertical-align:middle;max-width:260px;max-height:140px;}

All works great the issue is, that the image within the container div #product_image_preview centers the image horizontally but not vertically.

Any idea where I am cocking this up.

Our container div is always 260px x 140px

422
  • 5,714
  • 23
  • 83
  • 139

1 Answers1

2

http://jsfiddle.net/dcGZm/13/

That code should solve your problem. I slightly Modified from this link: http://www.brunildo.org/test/img_center.html , using an :after psuedo element rather than an empty span.

Should work in IE8 and above.

a {
    background: #000;
    vertical-align: middle; 
    display: table-cell;
    height: 260px;
    width: 140px;
    text-align: center
}

a:after {
    content: ' ';
    height: 100%;
    display: inline-block;
    width: 1px;
    vertical-align: middle
}

a img {
    max-height: 200px;
    max-width: 100px;
    vertical-align: middle
}
HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
  • 1
    http://jsfiddle.net/dcGZm/6/ ... I set max-width + max-height and seems to work fine now – HandiworkNYC.com Jan 15 '12 at 23:42
  • Ahh that seems better, let me have a play with our css and come back to set answer. Good work dude :) – 422 Jan 15 '12 at 23:48
  • Yer isnt working for us, perhaps we have a css clash somewhere. Thanks though mate appreciate your time and efforts – 422 Jan 15 '12 at 23:56