Gutenberg captions ok in editor, messed up once published

This fixes it but I’m not sure if it won’t introduce side effects:

.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.is-resized>figcaption {
    display: block;
    text-align: center;
}

To add or override CSS: use the “Additional CSS” option in the customizer. https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

Learn to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

Thanks Steve. I tried this and the caption then fills and centers across the width of the column, beyond the borders of the image. How do I make the caption follow the width of the image? @sterndata

• This reply was modified 5 years, 3 months ago by David Dodge.
• This reply was modified 5 years, 3 months ago by David Dodge.

It should be the width of the image.

Try adding this

.wp-block-image figcaption {
     padding: 1em 2em 0 2em;
}

@sterndata Hmmm, this produces the same result. A caption at full width when the image at partial width. There must be something in my twentyfifteen code (customized – not by me) that overrides??? If I display images full width everything is fine. It’s only when I try to size an image with align right or left. Sorry to bother you with this, but I have scoured and searched for ideas, but with limited knowledge of CSS no luck.
You can see what’s happening with the addition of your code here:
https://www.greenenergyfutures.ca/episode/life-with-an-ev-kevin-ma-environment-reporter-long-and-winding-road-to-electric-vehicle-ownership
With appreciation.

@sterndata Here is what the code looks like behind the image I placed using the block image placement tool:
<div class="wp-block-image"><figure class="alignright size-large is-resized"><img src="https://www.greenenergyfutures.ca/wp-content/uploads/2019/06/David-Chernushenko-Chevy-Bolt-1024x768.jpg" alt="" width="373" height="280" /><figcaption><a rel="noreferrer noopener" href="https://www.greenenergyfutures.ca/episode/224-activist-david-chernushenko-climate-thriller-burning-souls?customize_changeset_uuid=63af3c4f-94a0-4685-809a-50e86b9e5ddb" target="_blank">RELATED STORY</a> – Author David Chernushenko recently traveled across Canada in his Chevy Bolt electric vehicle on a <a rel="noreferrer noopener" href="https://www.greenenergyfutures.ca/episode/224-activist-david-chernushenko-climate-thriller-burning-souls?customize_changeset_uuid=63af3c4f-94a0-4685-809a-50e86b9e5ddb" target="_blank">book tour promoting Burning Souls</a> a climate thriller. Photo David Dodge, GreenEnergyFutures.ca</figcaption></figure></div>

• This reply was modified 5 years, 3 months ago by Steven Stern (sterndata).

When I messed with the cutline and deleted most of the extra text this is the html I see when I view html:
<div class="wp-block-image"><figure class="alignright is-resized"><img src="https://www.greenenergyfutures.ca/wp-content/uploads/2019/06/David-Chernushenko-Chevy-Bolt-1024x768.jpg" alt="" width="264" height="198" /><figcaption>This is the caption and it wraps to a second line testing testing testing testing testing. </figcaption></figure></div>

• This reply was modified 5 years, 3 months ago by Steven Stern (sterndata).

Update. I turned Tiny MCE editor and then replaced the image and it works fine. So it seems if a place images using the older editor it works. I do like working with blocks, but this problem with captions is totally frustrating unless I never want to use images smaller than full width. Sigh.