Alignment: images in a centered 3-column gallery appear left-aligned in one column on the front end

[newdrop20]

Hi i have an issue with gallery .

I added some images in gallery and arrange as 3 images need to show in one row . But what happen is every images in coming in separate rows .

https://drive.google.com/drive/folders/1SJKQ3BGs47nogfqwCuH7wd_LE4PEqw1i?usp=sharing

I tried this in two themes (Twenty fifteen and Twenty seventeen) but still the same problem occur . gutenberg version is 3.7.0

Please see the code below

<!-- wp:heading {"align":"center"} -->
<h2 style="text-align:center">hi this is h2v</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>This is test </li><li>this is second </li><li>this is third</li></ul>
<!-- /wp:list -->

<!-- wp:gallery {"columns":3,"align":"left"} -->
<ul class="wp-block-gallery alignleft columns-3 is-cropped"><li class="blocks-gallery-item"><figure><img src="http://localhost:81/wordpress/wp-content/uploads/2018/08/images.jpg" alt="" data-id="324" data-link="http://localhost:81/wordpress/home-page/images/" class="wp-image-324"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://localhost:81/wordpress/wp-content/uploads/2018/08/images-8.jpg" alt="" data-id="325" data-link="http://localhost:81/wordpress/home-page/images-8/" class="wp-image-325"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://localhost:81/wordpress/wp-content/uploads/2018/08/images44.jpg" alt="" data-id="326" data-link="http://localhost:81/wordpress/home-page/images44/" class="wp-image-326"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://localhost:81/wordpress/wp-content/uploads/2018/08/index.jpg" alt="" data-id="327" data-link="http://localhost:81/wordpress/home-page/index/" class="wp-image-327"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://localhost:81/wordpress/wp-content/uploads/2018/08/maxresdefault.jpg" alt="" data-id="323" data-link="http://localhost:81/wordpress/home-page/maxresdefault/" class="wp-image-323"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://localhost:81/wordpress/wp-content/uploads/2018/08/maxresdefault9.jpg" alt="" data-id="322" data-link="http://localhost:81/wordpress/home-page/maxresdefault9/" class="wp-image-322"/></figure></li></ul>
<!-- /wp:gallery -->

[madavibr]

It's not just in the gallery. Now any image inside the posts do not get more center, even checking in the code and seeing that there is aligncenter.
Left and Right is working normal but center does not work and the images are all left when I select aligncenter for the images.

[designsimply]

Thank you for reporting this as a separate issue! I tested and confirmed using the following steps:

1. Add a gallery block with 3 or more images.
2. Check that the block settings have Columns set to 3.
3. Select "Align center" in the block toolbar.
4. Publish the post and view it on the front end.

Result: in the editor, selecting "Align center" doesn't change the appearance of a gallery with 3+ images and it shows images in 3 columns as expected while on the front end a centered gallery appears with images left-aligned in a single column.

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14823&action=edit running WordPress 4.9.8 and Gutenberg 3.7 using Firefox 61.0.2 on macOS 10.13.6.}

^{Seen at http://alittletestblog.com/2018/09/06/gallery-3/ running WordPress 4.9.8 and Gutenberg 3.7 using Firefox 61.0.2 on macOS 10.13.6. Note: also tested with WordPress 4.9.8 and Gutenberg 735ab8d (3.8-pre-release) with the same result.}

It's not just in the gallery. Now any image inside the posts do not get more center.

The problem with centering images was reported in #9503 and fixed in #9509 and you should be able to see the update working in 3.8 when it is released.

[nfmohit]

Submitted #9694 which fixes this issue.

[karmatosed]

To me this should work over need design feedback. Looks like a PR is underway so let's remove the design feedback label from this.