Solution Time:
Ok time to wrap this little quiz up. Thanks for all the entries they were all great.
We had entries from the following:
ahmedij, lungcollapse, zcorpan, bill_1983, SgtLegend and cletus_spuckler.
The winner is ahmedij 
Well done.
Most entries followed the same idea so well done to all.
Solution
The solution to the problem is too think big as I mentioned in an earlier clue. It is quite easy to horizontally and vertically center an element of unknown height within a fixed height container but as we didn’t know the maximum height of the images how could we do this nicely?
The secret was to insert a div and to give it a height and width bigger than any image you could ever expect. There are browsers limits with large numbers but for my example I assumed 10,000px would be enough for any image. If you have bigger images than that then give up and take up something else
The div was placed inside a container with overflow:hidden so that it didn’t stick out and then it was positioned so that it was central. We know the width and height of the parent so its just a matter of positioning the div upwards and to the left by the required amount.
This leaves us with a container that can hold any size image (within reason) and then we use the old inline-block method of vertical centering as shown in the link above.
Here was my first attempt using the methods mentioned above.
<!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">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
position:relative;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
}
.gallery li div {
width:10000px;/* bigger than any image - can be any large number*/
height:10000px;/* bigger than any image - can be any large number*/
position:absolute;
top:-4900px;/* so that the 200px by 200px widnow is central within the 10000px div */
left:-4900px;
text-align:center;
white-space:nowrap;
}
.gallery li b {
display:inline-block;
vertical-align:middle;
width:1px;
height:10000px;
overflow:hidden;
}
.gallery li img {
display:inline;
vertical-align:middle;
border:1px solid #000;
}
</style>
</head>
<body>
<ul class="gallery">
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img1.gif" alt="test" width="200" height="200" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img2.gif" alt="test" width="110" height="110" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img3.gif" alt="test" width="300" height="200" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img4.gif" alt="test" width="900" height="1200" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img5.gif" alt="test" width="400" height="100" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img6.gif" alt="test" width="400" height="600" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img7.gif" alt="test" width="175" height="125" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img8.gif" alt="test" width="225" height="325" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img9.gif" alt="test" width="150" height="150" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img10.gif" alt="test" width="125" height="175" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img11.gif" alt="test" width="425" height="155" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img12.gif" alt="test" width="155" height="455" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img13.gif" alt="test" width="1550" height="1455" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img14.gif" alt="test" width="130" height="190" /></div>
</li>
</ul>
</body>
</html>
As you can see its pretty straight forward and will work right back to ie6 and possibly ie5.
The downside is that extra mark up needs to be added to achieve the effect so I made another solution that works without extra mark up but needs an expression fix for ie7 and under.
<!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">
/* works in IE8+ - ie6 and 7 need the expression */
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
position:relative;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
text-align:center;
white-space:nowrap;
}
.gallery li:after{
content:" ";
display:inline-block;
width:1px;
margin-right:-10000px;
position:relative;
}
.gallery li img {
display:inline;
vertical-align:middle;
border:1px solid #000;
margin-top:-9800px;
overflow:hidden;
}
.gallery li:before{
content:" ";
width:1px;
margin-left:-10000px;
vertical-align:middle;
position:relative;
display:inline-block;
height:10000px;
overflow:hidden;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.gallery li img {
font-size:10px;
position:relative;
top:-5437px;
display: block;
left: 1000%;
margin:0 0 0 -2000%;
}
.gallery li {
font-size:10000px;
vertical-align:middle;
zoom:expression( runtimeStyle.zoom=1, insertAdjacentHTML('afterBegin', '<b></b>') );
}
</style>
<![endif]-->
</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>
If you don’t like the expression then adding one extra element would see it working in all browsers. I’ll leave you to work out how the above works
Most of the entries followed my first example and will follow shortly. Before I post the other entries there was one interesting entry from Simon (zcorpan) that only worked in opera but only required one line of css and no change to the html!!
zcorpan Opera only
<!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">
.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;
}
.gallery li img {
border:1px solid #000;
}
/* http://dev.opera.com/articles/view/css3-object-fit-object-position/*/
.gallery li img { -o-object-fit:none; overflow:hidden; width:200px; height:200px }
</style>
</head>
<body>
<ul class="gallery">
<li><img src="http://www.sitepoint.com/forums/images/css-img1.gif" alt="test" width="200" height="200" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img2.gif" alt="test" width="110" height="110" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img3.gif" alt="test" width="300" height="200" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img5.gif" alt="test" width="400" height="100" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img6.gif" alt="test" width="400" height="600" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img7.gif" alt="test" width="175" height="125" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img8.gif" alt="test" width="225" height="325" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img9.gif" alt="test" width="150" height="150" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img10.gif" alt="test" width="125" height="175" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img11.gif" alt="test" width="425" height="155" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img12.gif" alt="test" width="155" height="455" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img14.gif" alt="test" width="130" height="190" /></li>
</ul>
</body>
</html>
Now wouldn’t that be easy if all supported it?
Here follow the other entries:
ahmedij:
<!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">
.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;
position:relative;
}
.gallery li div
{
height: 2000px;
width: 2000px;
left: -900px;
top: -900px;
line-height: 1995px;
overflow: hidden;
position: absolute;
text-align: center;
}
.gallery li img {
border:1px solid #000;
vertical-align:middle;
}
</style>
<!--[if lt IE 8]><style>
.gallery li div span {
display: inline-block;
height: 100%;
vertical-align:middle;
}
</style><![endif]-->
</head>
<body>
<ul class="gallery">
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></div></li>
</ul>
</body>
</html>
lungcollapse:
<!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>Sitepoint: Test Your CSS Skills Number 40 - Dead Centre</title>
<!--
What the task requires is that all images be centred horizontally and vertically within the 200px x 200px square which means that
small images will be centred nicely and very large images will just show the centre portion of the image which in most cases is likely
to be the important part of the image rather than just a flash of sky at the top. You cannot change the size of the image either by html
or css so the solution must work for an image at the size the image is.
http://www.andrewleeart.com/crosslinks/sitepoint/sitepoint-css40.html
-->
<style type="text/css">
/*
this method works as long as the image does not exceed 10,0000px
*/
.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:block;
position:relative;
}
.gallery div {
position:absolute;
height:10000px;
width:10000px;
top:-4900px;
left:-4900px;
line-height:0;
}
.gallery span {
display:table-cell;
height:10000px;
width:10000px;
vertical-align:middle;
text-align:center;
line-height:0;
}
</style>
<!-- handle alignment in IE 6 and IE 7 -->
<!--[if lt IE 8]>
<style type="text/css">
.gallery div {
position:absolute;
height:auto;
width:auto;
top:50%;
left:50%;
}
.gallery span {
display:block;
position:relative;
height:auto;
width:auto;
top:-50%;
left:-50%;
vertical-align:baseline;
}
</style>
<![endif]-->
</head>
<body>
<ul class="gallery">
<li>
<div>
<span><img src="sitepoint-css40/css-img1.gif" alt="test" width="200" height="200" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img2.gif" alt="test" width="110" height="110" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img3.gif" alt="test" width="300" height="200" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img4.gif" alt="test" width="900" height="1200" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img5.gif" alt="test" width="400" height="100" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img6.gif" alt="test" width="400" height="600" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img7.gif" alt="test" width="175" height="125" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img8.gif" alt="test" width="225" height="325" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img9.gif" alt="test" width="150" height="150" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img10.gif" alt="test" width="125" height="175" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img11.gif" alt="test" width="425" height="155" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img12.gif" alt="test" width="155" height="455" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img13.gif" alt="test" width="1550" height="1455" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img14.gif" alt="test" width="130" height="190" /></span>
</div>
</li>
</ul>
</body>
</html>
bill_1983:
<!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">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
border:1px solid #000;
float:left;
margin:10px;
display: inline;
}
.container * {
vertical-align: middle;
}
/*\\*//*/
.container {
display: block;
}
.container span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
.container1 {
width:200px;
height:200px;
overflow:hidden;
display:block;
position: relative;
}
.container {
height: 2000px;
width: 2000px;
overflow:hidden;
display: block;
vertical-align: middle;
text-align:center;
position: relative;
line-height:2000px;
left:-900px;
top:-902px;
}
</style>
<!--[if lt IE 8]><style>
.container span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
</head>
<body>
<ul class="gallery">
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></div>
</div>
</li>
</ul>
</body>
</html>
SgtLegend: - not working in opera and uses expression for <ie8
<!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>Unknown image centering using CSS!</title>
<style type="text/css">
<!--
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
border: 1px solid #000;
float: left;
height: 200px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
width: 200px;
}
.gallery li img {
*display: block;
left: 1000%;
margin-left: -2000%;
margin-top: -1911.5%;
*margin-top: expression(( 200 - this.height ) / 2);
position: relative;
top: 1000%;
*top: 0;
vertical-align: middle;
}
/* Opera hack */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.gallery li img {
left: 0;
margin-left: 0;
margin-top: 0;
top: 0;
}
}
-->
</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>
cletus_spuckler:
<!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">
.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;
position: relative;
}
.gallery li img {
border:1px solid #000;
display: inline;
vertical-align: middle;
}
.gallery span {
display: block;
height: 2000px;
left: -900px;
position: absolute;
text-align: center;
top: -900px;
vertical-align: middle;
width: 2000px;
}
.gallery b {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
</style>
</head>
<body>
<ul class="gallery">
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></span></li>
</ul>
</body>
</html>
Once again thanks for your support of these quizzes and keep an eye out for the next one. I’ll let you have a couple of weeks break first to recharge before the next one.
(If I missed anyone please shout as my computer died and my original list went missing.)