Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Centered Images Have Clickable Areas Outside the Image

Home Forums Support Centered Images Have Clickable Areas Outside the Image

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #181418
    Aaron

    So here’s a bit of an interesting problem I’ve come across. I’ve tried several solutions, but I just can’t come up with anything. Here’s my issue:

    As you can see, the entire width of the area the image is in is clickable, and that’s because centered images that use the “aligncenter” class are blocks instead of inline blocks. I’ve tried to change it to inline-block, but then it’s left-aligned no matter what and nothing I do will change it. I’ve tried using “!important”, I’ve tried changing the “aligncenter” class itself, and I’ve tried modifying it using a custom CSS addon, but nothing seems to be fixing it.

    Any ideas on anything I can change with the theme that’ll make centered images not be clickable in the full post width?

    • This topic was modified 4 years, 8 months ago by Aaron.
    #181458
    Tom
    Lead Developer
    Lead Developer

    Unfortunately you can’t center images alone without making them display:block.

    If you had a div surrounding the image, you could set align:center to that div, and it would center the image.

    Let me know if you need more info 🙂

    #181485
    Aaron

    Thanks for the quick reply, Tom. Is there any way to change the default behavior of WordPress’s aligncenter class? I tried to, but maybe I just did it wrong.

    #181608
    Tom
    Lead Developer
    Lead Developer

    What would you like to change it to?

    If you remove display:block, it won’t be centered, as there’s no container div around it set to text-align:center.

    #181630
    Aaron

    Well, Blogger uses a simple “text-align: center” for images I think, so I’d like to replicate that. Surely there’s gotta be some way to get rid of that clickable area while still centering the image.

    #181684
    Tom
    Lead Developer
    Lead Developer

    text-align:center only works on the container containing the image – not on the image itself: http://stackoverflow.com/questions/7055393/center-image-using-text-align-center

    So you need to do something like this:

    <div class="image-container">
        <img src="URL TO MY CENTERED IMAGE" alt="" />
    </div>

    Then add your CSS:

    .image-container {
        text-align: center;
    }
    #181711
    Aaron

    I see. I’m mainly wondering if I can change the WP centering option to use that new class instead of the default aligncenter. I guess it’s just a little more work if that can’t be done. Thanks.

    Edit: I actually found a reasonable workaround. Just setting the image to not link to media file itself prevents users from clicking the image and the area around it at all. It’s not 100% perfect, but it does what I want it to.

    • This reply was modified 4 years, 8 months ago by Aaron.
    #181783
    Tom
    Lead Developer
    Lead Developer

    Glad you found a workaround.

    Don’t think you can tell WP not to use the aligncenter class, but you can always overwrite what that class with your own CSS.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.