Make WordPress Core

Opened 12 days ago

Last modified 8 days ago

#54076 new defect (bug)

Twenty Twenty: image not centered

Reported by: damienaa Owned by:
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: needs-patch good-first-bug
Focuses: css, template Cc:


I updated every theme, every pluggin and WP itself but I cannot fix the "uncentered image" on my website. Could you help?
Here is a link: https://damien.cool/un-cheesecake-facile

Thx very much!

Change History (5)

#1 @costdev
12 days ago

Hi @damienaa, thanks for opening this ticket!

This does seem to be an issue with the bundled TwentyTwenty theme.

Linked to this:


.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 58rem;
    width: calc(100% - 4rem);

Adding margin-left: auto; and margin-right: auto; to this block appears to resolve this issue. - See below.

A good first bug perhaps?

Last edited 11 days ago by costdev (previous) (diff)

#2 @sabernhardt
12 days ago

  • Component changed from Themes to Bundled Theme
  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to 5.8.2

@hage reported this on #53111 while the problem was still in the Gutenberg plugin, and the margin seemed to be fixed in the editor.

Twenty Twenty already has auto margins on the left and right for entry-content elements:

.entry-content > * {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.25em;

However, the block editor (block-library styles) overrides that for image blocks:

.wp-block-image {
    margin: 0 0 1em;

Twenty Twenty-One's selector avoids changing separators and WooCommerce content, so perhaps editing the margin on .wp-block-image would be safer than .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide).

In Twenty Twenty, the side margins are currently auto if the image is resized, and the selector could be adjusted to fit all image blocks:

.wp-block-image.is-resized {
	margin-left: auto;
	margin-right: auto;

#3 @costdev
11 days ago

Adjusting the .wp-block-image.is-resized selector is the safer way forward. Nice one @sabernhardt!

#4 @mukesh27
11 days ago

Hi there!

In Twenty Twenty, is-resized class added in figure so if we add margin on that element it will not centered the image. To make image as center we should use below CSS.

.wp-block-image.is-resized img {
	margin-left: auto;
	margin-right: auto;

#5 @sabernhardt
8 days ago

  • Milestone changed from 5.8.2 to 5.9

The full image block needs to be centered because that has the width and max-width. However, the aligncenter class is on the figure within a wp-block-image div element.

I am having trouble reproducing the lack of a margin on the image block within a fresh 5.8 installation. There, the Twenty Twenty styles are enqueued after the block-library stylesheet, and the auto side margins correctly override the zero. Damien's site enqueues the block-library styles later. So the problem may happen with a plugin.

With the stylesheet order like that, changing .wp-block-image.is-resized to .wp-block-image in Twenty Twenty would not work. Adding a selector with body (or a similar element) might help, if necessary:

body .wp-block-image,
.wp-block-image.is-resized {
	margin-left: auto;
	margin-right: auto;
Note: See TracTickets for help on using tickets.