CSS - Test Your CSS Skills Number 40 - Dead Centre

CSS - Test Your CSS Skills Number 40 - Dead Centre: Quiz now ended - Solution in post #32

Don’t post your answers in this thread but PM with the details instead so that all can have a go.

This quiz is taken from a real life situation and although the solution should probably have been catered for with the back-end code we are going to do it using CSS only.

The task is this:

You have an image gallery that displays random images from your database in img tags in your html. The images are all various sizes and you have no control over what size the image will be.

The design calls for the images to be shown in a 200px x 200px square regardless of the size of the image however the image should not be resized.

At present the client is simply hiding the overflow but this display is ugly and the effect can be seen in the attachment called “dead-centre-not”. As you can see the small images hug the top left corner while large images show just blue sky background (note that the blue background is also part of the image so imagine perhaps its the sky).

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.

You can see from the second attachment “dead-centre-ok” how dramatically our display has been improved now that everything is centred.

The important part to remember with this task is that you don’t know the size of the image so that means you can’t shift each one by the required amount of pixels to make it centre. You must find a technique that automatically centres the images no matter what size they are (within reason).

No scripting allowed but the result must work from IE6+.

Remember we are looking for an automatic way so you can’t simply set up classes and place the image as a background image of the div because then you would need to know the image name in advance.

Here is some starting code but you are allowed to change the css and html as required (within the restrictions already mentioned) as long as you keep the display to 200px x 200px.

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gallery {
.gallery li {
	border:1px solid #000;
.gallery li img {
	border:1px solid #000;
<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>

You can link to my images for testing purposes.


Images must be centred horizontally and vertically within the 200px x 200px square as per my screenshot.

The image tags must remain in the html and you can’t simply type background images into the list element instead (although the effect would be the same as we are looking for).

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.

Must work in IE6+ and modern Safari, Chrome, Firefox and Opera etc.

Must work automatically and not reliant on the sizes of the images.

Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).

No scripts of any kind.

You can use whatever CSS and html you like apart from restrictions already mentioned.

To Recap:

You must use the image tags in the html and the images must not be resized to fit (either by css or html) and you cannot use background images because you don’t know what the image names are through css only.

I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won’t necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).

Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.

Don’t post your answers in this thread but PM with the details instead so that all can have a go.

Have fun.:slight_smile:

PS. : In case you missed the other tests you can find them all listed here:

Interesting, this should be fun.

I’ve had a couple of entries already but they changed the size of the image with a css rule like this:

 .gallery li img {
    border:1px solid #000;
    max-width: 200px;
    max-height: 200px;


That’s not allowed as that would change the aspect ratio and size of the image and the image must always be the same size it was but just centred in the square box.

Hmm, I didn’t realize you weren’t supposed to post the answer. Looking at previous quizzes people are PM’ing, so PM’d.

Thanks for your entry Kokos but you missed the point about not using background image because you don’t actually know what the image names are beforehand so you can’t use background images. :slight_smile:

Good try though and keep working at it.:wink:

Yes and please PM the answers rather than position in the thread in case the answer is given away and spoils it for others.

I don’t see the difference, if you are capable of creating the HTML for image tags you should be able to do the same for background images. But I understand that it changes the assignment drastically, will be keeping an eye on this because I can’t figure it out and am very curious.

Hello Paul…
I am new here. Please check PM :slight_smile:

Hi Ahmedji thanks for your entry and yes that is pretty close but is not working in IE6 and 7 at the moment but I’m sure you can fix it :slight_smile: (and welcome to Sitepoint by the way :))


Imagine the page is already built and being used and the images are already placed into the page after they are taken from a database. The page is already coded with php and mysql and it is the serverside scripting that determines the images to place in the page.

The task is to find a css/html only solution and avoid employing a php sql programmer to make the changes in the back-end and swapping the image tags to background images instead. I mentioned in the first line of the task that a back-end solution would be relatively easy but this is a CSS quiz and we are looking to see what CSS can do.:slight_smile:

You don’t know what the images names are or what size they are because they are random and plucked differently from the database each time.

I hope that clarifies the task:) (You may think this is a bit convoluted but it was actually a real scenario.)

I hope we are good now :slight_smile:

Hi ahmedij,

Yes that’s the solution I was looking for :slight_smile:

Well done, congratulations for doing it so quickly and thanks for participating.

Anyone else getting close yet?

Anyone else had a try yet or is anyone stuck?

damn no time, I’ll have to post it as soon as I get it ready in my bathroom breaks haha

Same here; haven’t found the time for it yet :slight_smile:

Haven’t had a chance to get it a try yet, I’m hoping to give it a whirl tomorrow or Sunday

Thanks all - there is no rush I won’t start handing out clues until next week anyway.

I’ve been busy myself and its a holiday here in the uk on Monday so I’ll probably be dragged out somewhere :slight_smile:

Maybe I’ll take another look at it tomorrow when I’ve got some free time :slight_smile:

This is my first go at the CSS challenge. I have to admit, this was a tough one. It had me pulling my hair out. I am curious to see what solutions others have come up with.

Hi lungcollapse and welcome to Sitepoint :slight_smile: (the username frightens me though at my age)

Well done you have a correct solution so for a first post you have done very well. You may want to look at some of the old quizzes if you have spare time but don’t look at the answers first :wink:

Many thanks for taking part.

This is quite a tricky one, I’m at the point where i can get all but that one massive 1500px image centered, plus i broke my attempt in IE 6 and 7 with perfect success :slight_smile: