Anchor / link around block-level image

[Dude_S]

I have an image that I needed to declare as block-level element in order to center it with CSS (Why can CSS not have a simple "center"?):

img {
display: block;
margin: 0 auto;
}

The problem is that the image also needs to be linked. Problem because you are not supposed to wrap <a> which is an inline element around block level elements.

All solutions [webmasterworld.com] I found [codingforums.com] to this problem suggest to switch the anchor tag and the block-level tag, e.g.:

<h1><a>...</a></h1>

Unfortunately, this doesn't work with images. What to do?

[tedster]

Let the linked image remain inline and put the whole shebang in a block level div which you can then center?

[penders]

An IMG is always an inline-level element as far as HTML is concerned, despite what you specify in the CSS. It is always valid to have an IMG inside an anchor. Specifying display:block, does not make it a block-level element - that is defined by the HTML spec.

However, you may find your page no longer displays as you wish? Is that the problem? I think tedster's suggestion is preferred. But you could also make the anchor a block! (Remember, this would only make the anchor display:block, it is still an inline-level element, so you can't go sticking DIVs in it!)

[Dude_S]

Thanks guys!

I didn't seem to have display problems in FF, but I haven't tested it fully yet, was afraid some browsers might throw a fit. Good to know I can leave it as is. I wanted to avoid DIV hell as much as I can by styling elements directly.

[rocknbil]

You can also set the anchor as a block. (?)

edit:" But you could also make the anchor a block!" Sorry penders, doh . . .