WordPress.org

Ready to get started?Download WordPress

Forums

How to add a div around non-captioned images? (3 posts)

  1. chrishecker
    Member
    Posted 3 years ago #

    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

  2. chrishecker
    Member
    Posted 3 years ago #

    No ideas on how to solve this?

    Chris

  3. Mike Little
    Member
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic