Caption alignment images

Hi @christianmuellerdhv,

I couldn’t reproduce it. That’s how it shows from my end:

Full Size: https://d.pr/i/EYmvwG

Could you please copy/paste the code here, so I can try to reproduce?

Hi Felipe,

in your Screen I cannot see the alignment of the image, because it seem’s to be full wide. For reproducing my problem please make the second image inside the row smaller and check, that the alignment of the row is “center”, like in my code below:

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:image {"id":49,"width":"279px","height":"auto","aspectRatio":"2.8764044943820224","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://spielwiese6.hanfverband-dev.de/wp-content/uploads/2023/10/Canada-flag-header-1-80p-1024x356.jpg" alt="" class="wp-image-49" style="aspect-ratio:2.8764044943820224;width:279px;height:auto"/><figcaption class="wp-element-caption">Caption B</figcaption></figure>

Hope this helps to reproduce…

Regards

Chris

Hi @christianmuellerdhv,

It still shows in the same way for me. I believe this is the default design with Twenty Twenty-Three — this would only show differently if you are using a child theme or something like that.

Full Size: https://d.pr/i/nWtihy

If you want, you can try to see how it works from this code that I generated here:

<!-- wp:image {"id":171,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wptest-multisite.mystagingwebsite.com/base-site/wp-content/uploads/sites/8/2023/08/4919c4c9-9033-342f-909f-a75a11685610-1024x682.jpg" alt="" class="wp-image-171"/><figcaption class="wp-element-caption">This is my caption.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":171,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wptest-multisite.mystagingwebsite.com/base-site/wp-content/uploads/sites/8/2023/08/4919c4c9-9033-342f-909f-a75a11685610-1024x682.jpg" alt="" class="wp-image-171"/><figcaption class="wp-element-caption">This is my caption.</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":170,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wptest-multisite.mystagingwebsite.com/base-site/wp-content/uploads/sites/8/2023/08/bedb708b-aff6-32e1-85a0-d32d3bf0636b-1024x682.jpg" alt="" class="wp-image-170"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

If even that doesn’t work, can you try to reproduce the same issue with a brand-new installation (without other plugins/themes) and using Twenty Twenty-Three?

Hi Felipe,

we are coming clother, please check the same again in a row, inside columns it is also working for me. Please check again

https://spielwiese6.hanfverband-dev.de/align-image-description

wich is a clean install with no plugins and tt3 as a parent….

Best regards

Chris

Hi @christianmuellerdhv,

Just got to check this now.

I’m not sure if you already have a solution, but as you’re saying that TT3 is the parent theme, it makes me wonder how it goes if you activate it without the child theme. Can you try that?

Oddly, I can’t really reproduce your issue.

All of these show in the left for me.

Hi Felipe,

no solution, just the workaround described above. What do you mean by “activating it without the child theme”, deleting the child-theme? No change. All my problems happens in a child theme, but before I write something here in the Forum I test it on a DEV-instance which is clean, no Plugins, no custom CSS and using TT3 only.

I just upgraded to WP 6.4 and tried the same with the new TT4 – same problem with image-description of images in rows…

Best regards

Chris

@christianmuellerdhv could you please write steps for reproducing in case I’m missing something here?

For instance, something like that:

1. I go Site Editor, then […]
2. There I add the block […]
3. Add caption and reproduce the issue.

Hi Felipe,

1. Create a row
2. Put an image in
3. Create a caption for the image
4. Align the image centered

The same Image not inside a design-container or inside a column the caption get’s aligned the same way as the image. But inside a row the caption is allways aligned “left”…

best regards

Chris

Hi there,

Yes, I see your point now.

That’s actually expected — I asked for more details because I saw that it was aligned for you in some cases.

There are discussions about this here, so you can follow/comment for more details: https://github.com/WordPress/gutenberg/issues/19975