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