complex css image centering help?
- by Tenshiko
My problem is a bit more complex than the title says. Sorry, I don't know how to be more specific...
I'm working on a website and I came across a part where I should display some thumbnails. The thing is, the thumbnails are not matching in dimensions. (I know, it sounds ridiculous, since this is thumbnails are for, right?) No, there is simply NO WAY to create them in the same dimensions!! I've managed to create a HTML+CSS structure to fix this problem, and the images are not stretching to fit their containers if they are smaller while keeping their aspect ratio.
The only issue remaining, is to center the images. Since setting margin to "0 auto" or "auto 0" are not helping, I've tried setting up multiple containers and setting the margins to position the images. This is also not working: if I put a 120x120 picture in a 120x80 inner container, and I set the container's top and left margin to -50%, the margins become -60px both. Can this be fixed? Or is there yet another way to center images?
I'm open to any suggestions!
HTML:
<div id="roll">
<div class="imgfix">
<div class="outer">
<div class="inner">
@if (ImageDimensionHelper.WhereToAlignImg(item.Width, item.Height, 120, 82) == ImgAlign.Width)
<!-- ImageDimensionHelper tells me if the image should fit the
container with its width or height. I set the class of the img
accordingly. -->
{
<img class="width" src="@Url.Content(item.URL)" alt="@item.Name"/>
}
else
{
<img class="height" src="@Url.Content(item.URL)" alt="@item.Name"/>
}
</div>
</div>
</div>
</div>
CSS:
.imgfix{ overflow:hidden; }
.imgfix .outer { width:100%; height:100%;}
.imgfix .inner { width:100%; height:100%; margin-top:-50%; margin-left:-50%; }
/*This div (.inner) gets -60px for both margins every time, regardless of the size of itself, or the image inside it*/
#roll .imgfix { width:120px; height:82px; border: 1px #5b91ba solid; }
#roll .imgfix .outer { margin-top:41px; margin-left:60px; }
/*since I know specificly what these margins should be, I set them explicitly, because 50% got the wrong size.*/
#roll .imgfix img.width { width:120px; height:auto; margin: auto 0; }
#roll .imgfix img.height { height:82px; width:auto; margin: 0 auto; }
