[Resolved] Issues with images no longer centered and spacing

[Alexandra]

Hi there!
I have some issues with images in my posts and I’m hoping you can help.

1. Some images are no longer centered.
This is an example from my current site (with my current theme), where they are centered: https://bloguldecalatorii.ro/2011/12/piatra-craiului-la-lanturi-creasta-nordica.html

This is the same post on my staging, where I have installed GeneratePress, where images are no longer centered:
https://alex.bandiwork.dev/2011/12/piatra-craiului-la-lanturi-creasta-nordica.html

Is there a quick way to fix this? Maybe some CSS that can align center all images in my single posts?

2. The space between two images placed one after another is now too big. You can see this if you scroll down to this example: http://prntscr.com/vd3tdv

Is this maybe because of line height? If so, can you please help me keep my line height but have a smaller space between images?

Thank you!
Alexandra

[David]

Hi there,

the alignment of the images should be set in the post editor.
However if you want you can apply this CSS which i have included a reduction in the bottom margin:

.single-post .entry-content .wp-block-image {
    text-align: center;
    margin-bottom: 1em; /* adjust vertical spacing below image */
}

.single-post .entry-content .wp-block-image img {
    vertical-align: bottom; /* tweak alignment */
}

[Alexandra]

That is awesome!
Thank you so much, David!
I would have gladly aligned images in the post editor, but I have hundreds of posts in this situation and I really needed a quick fix!
Thank you so much! You’re a life saver!

[David]

Glad to be of help!

[Alexandra]

Hi, David!

I have 2 similar issues with image alignment, I’m really hoping you can help!

1. Images that should be centered are weirdly displaced to the right on mobile (Example: http://prntscr.com/vdvgby):

Current theme, where they are correctly centered: https://bloguldecalatorii.ro/2013/11/hasmas-cabana-piatra-singuratica-varful-hasmasul-mare.html
GeneratePress, where they are incorrectly displayed: https://bloguldecalatorii.ro/2013/11/hasmas-cabana-piatra-singuratica-varful-hasmasul-mare.html

2. Masonry block gallery displaced to the left on desktop (example: http://prntscr.com/vdvfhr):

Current theme, where they are correctly centered: https://bloguldecalatorii.ro/2019/11/grecia-antipaxos-2019.html
GeneratePress, where they are incorrectly displayed: https://alex.bandiwork.dev/2019/11/grecia-antipaxos-2019.html

Do you have any idea how to fix these, please?
Thank you so much!
Alexandra

[David]

1. the off center image has some inline styling applied to it that is adding margins:

You would need to remove them from its HTML.

2. Is that a plugin used for displaying the Gallery ? As its set to Large setting which looks like it is expecting there to be a minimum of 3 images.

[Alexandra]

Hey David!

1. How do I remove that? I haven’t added that inline styling manually, I’ve always had it by default. (I have it on the live website too… See here: https://bloguldecalatorii.ro/2013/11/hasmas-cabana-piatra-singuratica-varful-hasmasul-mare.html)
It’s quite weird, too, because the margins are equal, so the image should still be centered, not displaced to the right… But if that IS the reason, can you please tell me how to remove it?

2. Indeed that is very strange. Yes, that is a plugin, and on the live website it’s set to XLarge, but on staging it simply jumped to Large. I’ll just have to sort that manually, I guess.

Thank you!

[David]

1. Left and right margins don’t affect the width of an element so when they hit a container the left hand side always pushes the element over regardless of what that right margin is doing.
You would need to edit the page in code/text move and remove the inline styles from the HTML.

2. Might be worth checking with the plugin author – one would expect it would not create columns if there wasn’t enough images to fill them.

[Alexandra]

1. Oh, all right! So there is no quick fix to remove that automatically, right? Just making sure, because I have thousands of images in this situation…

2. Yes, one would definitely not expect that 🙂 But then again… with plugins you never know what to expect 🙂

Thank you so much!

[David]

1. You could try some CSS like this:

a[style*="margin-left: 1em; margin-right: 1em;"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Its a wildcard selector using the elements style attribute. It will only target the <a> elements with that exact style.

[Alexandra]

Oh, wow! This is amazing! You didn’t just help me fix the issue and save tons of time, but you also helped me learn. Thank you for the explanation! I have 0 coding knowledge, so this is very educational 🙂
I can’t thank you enough!

[David]

So glad to be of help 🙂

[Author]

Posts