How To Centre Captions Under Blog Images On The Gutenberg Editor

Are you having problems getting captions under the images on your blog posts to align centre when using the Gutenberg editor?

When previewing the post, although captions looked centred, when a post is published, captions are aligned to the left under images, photos and pictures.

Centring captions

Up until a few weeks ago, I was having the same problem and was having to centre captions by creating a new paragraph block under images, photos and pictures, and centring the text from there.

However, this meant that if I used the same image again, I had to hunt down copyright notices because if I added details in the edit area of an image, the text always aligned to the left.

The result was captioning looked out-of-line, which in-turn spoilt the look of the images, photos and pictures, as well as the whole post. It wasn’t a look I liked.

However, with the help of the friendly folk at WordPress, I found a way of centring all captions when using any of the gallery or image blocks on the Gutenberg editor.

Let’s get started

  • Click on ‘My Site‘ or ‘My Sites‘ in the top left of your blog.
  • Click on Design, then on Customise.
Click on ‘Design’ then on ‘Customise’.
  • In the new menu that opens, click on the CSS Panel.
Click on the CSS Panel
  • Add the following code into the CSS box.

/* align caption on center-aligned images KG-15020525-hc */ .wp-block-image .aligncenter> figcaption { text-align: center; } /* KG-15020525-hc */

Add the code
  • Click publish.

You’re done

Captions under images, photos and pictures on all your blog posts will now be centred.

A happy ending for this last blogging tips post from me for 2019.

Don’t worry; I’ll be back with lots more blogging tips posts in the New Year and a few more other blog posts before the end of 2019.

Copyright © 2019 – All rights reserved.

78 thoughts on “How To Centre Captions Under Blog Images On The Gutenberg Editor

  1. Just to let you know, Hugh, I originally read this and made the fix and at some point, the captions went back to the left side. I did change themes a while back but have been too lazy to change it. So with a new year, I searched your site and found the post, made the fix and off to the races!

    1. That’s great to hear, Terri. You have to also align photos and images with captions to the centre for it to work (as I discovered a while back). If they’re aligned to the left or right of the text, then captions also move. Good to hear it’s still working, though.

  2. Hi Hugh,
    Great solution to a common problem. I‘ve added in the code to my additional css spot on my essence pro theme, it’s works fine on the 1st image ( Center) then goes back to the left for the remaining images. I’ll keep playing with the code to see if it’s just me.
    Many thanks.

    1. Hi Dave, it could there that is a bug in the theme you use. May be worth checking with the WordPress Happiness engineers if you can’t sort it out. Also, I always add my credits to images on each block, rather than in the media library, as I found some of the credits I added in the media library were not always centring.

      Also worth mentioning is that I found your comment in my WordPress spam folder. Not sure why it ended up in there, but it may be worth checking if comments you are leaving on other blogs are also going to straight to spam. If they are, then there is a solution which I published a few years ago. I’ve added a link to the post just in case you need to use it.

      What To Do If All Your Comments Are Ending Up In The WordPress Spam Folder

Leave a Reply to Hugh W. Roberts Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.