Ok I had a play around and it seemed to be something to do with setting your img to
display: block;. Naturally it's an inline element. When I deleted that style rule, it got rid of the extra clickable space around the image. To get it working how you wanted, I had to give your <div> a style of
text-align: center;. (This centers ALL children of that div) so I set your
It isn't pretty, but it depends how far along in writing your page you are which will determine how easy this is to change/implement.
The usual centering of an image setting a width and a margin of auto doesn't seem to work, which I've never seen before :s
Anyway, here is the code, give it a test and see what you think.
<h2>Look at this idiot!</h2>
<img id="football_img" alt="image of football" src="phpwp.jpg" />
It could be other styles affecting the centering. Are there any other styles which apply to the div?
border: 1px solid black;