Images in blocks auto left align when centre align selected

[lifeadventurers]

When using Gutenberg block editor, images are automatically left aligning in preview and publish mode although in edit mode images are centre aligned. Confirmed in CSS code too.

[lifeadventurers]

CSS code example of image alignment issue

[lifeadventurers]

Preview of published article with conflicting with CSS code information

[joyously]

The preview is controlled by the theme. What theme was this test done with?

[lifeadventurers]

Current Theme: Cubic
Web Browsers: iPad, iPhone, Chrome, Safari (desktop) and IE.
Hope this is useful.

Replying to joyously:

The preview is controlled by the theme. What theme was this test done with?

[sabernhardt]

The Cubic theme does not center caption text, either on the front end or in the editor (with the optional theme.css). Yet the editor uses text-align: center for the entire image block when choosing center alignment. However, I do not think the editor should enforce that same style on the public side.

If you want the image captions centered on the front end, you could add one of the following lines to the Additional CSS (in Appearance > Customize).

1. For all image block captions:

   .wp-block-image figcaption {text-align: center;}
   

2. For captions in center-aligned image blocks:

   .wp-block-image .aligncenter {text-align: center;}
   

[joyously]

Replying to sabernhardt:

If you want the image captions centered on the front end,

The ticket is about the image alignment, not the caption.

[sabernhardt]

Thanks for correcting me.

The Cubic theme seems to center the images properly (on the front end) now.