[Resolved] Centered Images Have Clickable Areas Outside the Image

[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 8 years, 10 months ago by Aaron.

[Tom]

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 🙂

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

[Tom]

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.

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

[Tom]

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;
}

[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 8 years, 10 months ago by Aaron.

[Tom]

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.

[Author]

Posts