Update: Gutenberg 3.80 has corrected the centered image issue.
The following should be a centered Image Block
As you can see, it’s not centered. Looks like the following style from Gutenberg is causing the image to move left:
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
display: table;
margin: 0;
}
display: table;
margin: 0;
}
It’s overriding the <figure>’s CSS of:
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
display: block;
margin-left: auto;
margin-right: auto;
}
This is a known issue: Alignment: images cannot be centered on front-end [3.7] · Issue #9503 · WordPress/gutenberg
To work around it for now, you can put the following CSS into your theme’s style.css ( ideally a child theme ) or go the Dashboard -> Appearance -> Customize -> Additional CSS and add it there.
/* Gutenberg Tweaks */
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
margin: auto;
}
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
margin: auto;
}
Whenever they update Gutenberg to correct the issue, the above can be removed as it will be redundant.
Loading ...