How to add a div around non-captioned images?

  • Hi, I’d like to change the way non-captioned images are specified in html when they’re aligncenter. Currently, it looks like:

    <a><img class="aligncenter"/></a>

    but I’d like it to be:

    <div class="aligncenter"><a><img/></a></div>

    I couldn’t figure out how or where to do this. There are filters for captioned images and the caption shortcode, and filters for the img itself, but how can I robustly hook in, remove the aligncenter from the img and put it into a div that contains the link as well?

    As for why I want to do this, I really dislike how links around display:block margin auto centered images work, since it makes the entire width of the post where the image is a link, instead of it just being an image. If I could fix that in css that’d be great, but I couldn’t figure out how to do it without getting a div around the whole thing, hence the above question.

    Thanks,
    Chris

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter chrishecker

    (@chrishecker)

    No ideas on how to solve this?

    Chris

    You can’t really solve this with a div, because you can insert a centre aligned image in the middle of a line of text. That line of text will become a paragraph, which is not allowed to have a div in the middle of it.

    But if you change the style rule from this:

    .aligncenter, img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

    to this :

    .aligncenter, img.aligncenter {
    clear: both;
    margin-left: 49%;
    margin-right: 49%;
}

    it appears to do what you want in Firefox at least, can’t vouch for any other browsers right now.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to add a div around non-captioned images?’ is closed to new replies.