IMHO, there is one obvious solution missing, quite similar to the Opera only solution @zcorpan posted:
Normally, images would centre in the middle of the box if they had vertical-align applied, and the box had a line-height the size of its own height and text-align center applied to its content. Then the all images that fit in the box would centre in the middle of the box.
The trick is to make all images, regardless of their size, fit in the box:
Shrink or even remove the space they need by give them negative margins that negate the need of space.
The image itself isn’t affected, only the need of space, the area that is too big will just overflow the box and be hidden. Only what fits in the box will show, and that will be the “dead center” part of it.
Solution is four line of css, no changes in the html. Quite like @zcorpan’s Opera solution.
<!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>Quiz #40 - Dead Centre</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
display:inline-block;
text-align:center; /* center the image on the textline */
line-height:200px; /* set equal to the li height */
}
.gallery li img {
border:1px solid #000;
margin:-1000px; /* overflow the box if larger than the li box (<=2200px) */
vertical-align:middle; /* in the middle of line-height (200px) */
}
</style>
</head>
<body>
<ul class="gallery">
<li><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></li>
</ul>
</body>
</html>
Maybe there are even better solutions to this nowadays?
That seems similar to the answer in the quiz in that you make the area for the image larger than needed and thus you can always center it. Your solution is neater in that it uses less code of course .
We could do the same with absolute positioning on the image:
e.g.
<!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>Quiz #40 - Dead Centre</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
display:inline-block;
text-align:center; /* center the image on the textline */
line-height:200px; /* set equal to the li height */
position:relative;
}
.gallery li img {
border:1px solid #000;
position:absolute; /* overflow the box if larger than the li box (<=2200px) */
left:-2000px;
right:-2000px;
top:-2000px;
bottom:-2000px;
margin:auto;
vertical-align:middle; /* in the middle of line-height (200px) */
}
</style>
</head>
<body>
<ul class="gallery">
<li><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></li>
</ul>
</body>
</html>
Of course that is extra code to your example but I believe they are ultimately doing the same thing,
The object fit (as used in zcorpans demo) is now in most modern browsers apart from IE so is close to being a natural way to do this.
There is a solution for Firefox that uses even less code than your example by using flexbox:
However, it doesn’t work in IE and it only works in Chrome if you drag the browser window smaller or larger. It seems to me that implementations of flexbox are still shaky in extreme cases.
Chrome could be fixed by adding this rule:
.gallery li img{object-fit:cover}
Which will still leave IE out out in the cold so the negative margin technique is still a better method.
I don’t think we missed that solution as such but rather at the time that type of solution would not work in the older ie6 and 7 browsers I believe (although I don’t have means to test those since as I left those versions on my old computer).
Maybe it would prove interesting to look at some old demos and see if modern methods have easier solutions now that we don’t really care about the older browsers.
Of course, you are quite right. I fired up an old Compaq 1246 with Win2k and IE6 and checked. It didn’t work in IE6, neither did the absolute positioning version. Your original solution worked fine.
That could be interesting to see how the technique has evolved regarding demos that would still today be relevant cases.
.