homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Anchor / link around block-level image

 10:12 pm on Jul 22, 2010 (gmt 0)

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.:

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



 2:53 am on Jul 23, 2010 (gmt 0)

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


 8:30 am on Jul 23, 2010 (gmt 0)

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!)


 4:29 pm on Jul 23, 2010 (gmt 0)

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.


 6:08 pm on Jul 23, 2010 (gmt 0)

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

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved