Twenty Nineteen: Image aligncenter inside column is broken

[dianeco]

Since Twenty Nineteen v1.2, the images set to aligncenter aren't centered on the front-end when placed inside a column (they're centered inside the editor).

[mukesh27]

@dianeco you can please try below css. it is working fine for me in WordPress 5.1-beta1-44607

.entry .entry-content .wp-block-columns .wp-block-image .aligncenter { width: 100%; }

Try above css and let me know here so add patch.

[Mista-Flo]

Replying to mukesh27:

@dianeco you can please try below css. it is working fine for me in WordPress 5.1-beta1-44607

.entry .entry-content .wp-block-columns .wp-block-image .aligncenter { width: 100%; }

Try above css and let me know here so add patch.

It works on desktop, but not on mobile.

So we should be really careful when editing this CSS

[truchot]

Hi, it's seems code below in _block.scss fix this issue & no need media query anyone to test ?

.aligncenter {
	@include postContentMaxWidth();
	width: 100%;

	img {
		margin: 0 auto;
	}
}

[Mista-Flo]

Just uploaded the patch from @truchot work, it removes unnecessary media queries and add a width 100% to the element.

[karmatosed]

I think because this removes queries it needs some testing. I am going to add that to the keywords for now.

[sudipatel007]

I have tried without patch and with patch but issue is not regenerated. I think we need more information to replicate the issue

[karmatosed]

As shown in the above examples there is some issue with the alignment, the patch though doesn't resolve it. What it seems to do is make it worse on smaller screens. My recommendation at this point is to move this to getting a refresh and testing.

[sainathpoojary]

In my testing, I was unable to reproduce the issue on both desktop and mobile.
I followed these steps to attempt reproduction:

1. Add a Columns block with two columns.
2. Add an Image and a Paragraph in each column.
3. Center-align the images.
4. Check the frontend.

Editor:

Frontend:

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.27
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.4.3 / Client: mysqlnd 8.2.27)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Nineteen 3.0
• MU Plugins: None activated
• Plugins: None activated

[navi161]

The images and align centre work fine for the theme.

Performed the steps mentioned in the previous step to test.

Screens attached
Tested on Mobile devices as well as Web browsers.

Environment

• OS: macOS Sonoma 14.6.1
• Web Server: PHP.wasm
• PHP: 8.2.23 (Supports 64bit values)
• WordPress: 6.8-RC1
• Browser: Chrome 134
• Theme: Twenty Nineteen
• Active Plugins: NA

[SirLouen]

Since there are multiple reports of users being unable to reproduce this issue and this is a very old report and no answer from the reporter since then, I think that the most adequate resolution of this report is a worksforme

This was reported in Twenty Nineteen 1.2, and we are in 3.1 currently. A lot has rained since then. Maybe it was sorted at some point

To add over the top, I've also tested on my side and I can't reproduce this either.