Images no longer centered

I took a look at your blog, and the images seemed centered in the content to me. Do you have an example where it’s broken?

Well, the figure is not centered within the wp-block-image DIV if that is what he is referring to. My guess is the first image is supposed to be below the Barnes & Noble button in the middle and not under the Left Buy at Amazon button?

With my own testing, also does not center. I think the following CSS is causing it:

.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
	display: table;
	margin: 0;
}

That margin:0 shoves the image to the left. This rule is overriding:

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

Which the <figure> tag is using.

Well, I found this: known issue: Alignment: images cannot be centered on front-end [3.7] · Issue #9503 · WordPress/gutenberg

• This reply was modified 6 years, 6 months ago by MarkRH.
• This reply was modified 6 years, 6 months ago by MarkRH.

Yes, it’s most obvious with those award images on that page. As MarkRH says, they should be below the B&N button and aligned with the text explaining what the award is.

Glad to hear this is a known issue. Hopefully a fix is coming soon! I might revert to a version pre-3.7 in the meantime…

After updating to the latest version of Gutenberg, my centered image blocks are no longer centered. It was fine in the previous version.

The page I need help with:

https://rjjdijk.nl/sorry/

After updating to the latest version of Gutenberg, my centered image blocks are no longer centered. It was fine in the previous version.

Glad to hear this is a known issue. Hopefully a fix is coming soon!
I downgrade to a version pre-3.7 in the meantime…

I’m confused. The award images are centered in their column for me in Chrome. The .wp-block-image.aligncenter rules override the more general rules because of specificicity.

What browsers are you using?

@rjjdijk If you’re having issues, please make your own topic for it. Easier to manage these sorts of issues one at a time.

Alright here’s a screenshot with Firefox 62 and Chrome Version 69.0.3497.81 (Official Build) (64-bit): https://i.imgur.com/DroJw7J.png

Image is to the left instead of centered.

Test Post I made to show it: https://blog.markheadrick.com/2018/09/06/gutenberg-3-70-centered-image-test/

If I get rid of the margin:0 in the Gutenberg style, image centers in both browsers. I can easily fix it by changing some CSS but am leaving it like this for testing.

Gotcha, I can see that one. Looks like it has a fix slated for the next release of the plugin:

https://github.com/WordPress/gutenberg/commit/ad9c1798487b0606edd28b1ddc681350e4c2b3aa