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.

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.
  • In the new menu that opens, 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 */

  • 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.

Looking for more blogging tips? Click here to join my blogging tips magazine on Flipboard, and here to read them on Mix.Com.

Copyright © 2019 hughsviewsandnews.com – All rights reserved.

56 comments

  1. I got really frustrated with Gutenberg after using it successfully for a time. I switched back to Classic. With the new year perhaps I’ll give it another go!

    1. Like any new software, there have been lots of bugs in the Gutenberg editor, but as WordPress move more and more support to it, I’m sure those bugs will soon get sorted out. I’ve found that the more I use Gutenberg, the better I get at knowing how it works.

  2. Thanks as always for your excellent tips. I find classic easier to use, but Gutenburg has a few tools I like. My problem has been switching between them. They apparently get jealous and try to convert a post back to their format. So frustrating!

  3. Thanks for sharing – I shared a link to this post for my fellow bloggers who are brave and using “G” for their editor. I haven’t jumped completely to it yet. I sure hope most of the bugs are out of it when I finally take the leap of faith!

    1. Hi Shelley, thank you for sharing. I’m seeing more and more bloggers jump onboard with Gutenberg as they become more familiar with it. As with any software, there are still bugs, but less and less every week. As soon as WordPress move support entirely over to the Gutenberg editor, I’m sure those bugs will be a thing of the past.

    1. I was having a lot of problems with the Classic editor, especially with getting pingbacks to work, Debbie. There are problems with the Gutenberg editor, but I’m pleased to say that the WordPress Happiness Engineers seem to be prioritising support for them now. Given that new bloggers only have access to Gutenberg, I’m sure lots more problems and bugs will be reported, but it’s good to know that the support is there. This particular problem was an easy fix. However, I hope it doesn’t reoccur.

      1. I can well imagine the bugs, lord know we have enough gremlins with WP. Well, all I can say is your readers are lucky to have you explain it all. I hope I won’t have to learn it, but if I do, I know where I’m coming to learn LOL ❤

    1. Oh no! I’m sorry to hear it’s not worked, Debbie. The position of the code in the CSS box is very sensitive. It took me a couple of goes to get it right before it worked. Most of the people I passed on the information on to said it worked for them. If you continue to have problems with getting it to work, I’d ask the Happiness Engineers for some help. They were really helpful when I told them what the problem was, and it took them not very long in getting the error fixed for me. Let me know how you get on.

      1. OK, I went back into your post and looked at your screen shot of the text and copied it and pasted it in the exact same way you had it rather than just as the whole line of text as i’d previously done. There were also a few * missing in places (not sure of they make a difference or not) and hey presto, now it works perfectly!! Thanks so much for that Hugh. Well worth persevering with as it always bothered me as looking messy. Now it’s all looking great 🙂

  4. Oh, I will be all over this one, Hugh! I get so annoyed with the look of the captions, and the font size is the same as the font in my post, so it looks like run-on sentences or out of place when published. Thanks for this tip and look forward to reading your next posts.

    1. I couldn’t agree more, Terri. I didn’t like having to create a new block paragraph to put a caption under each image. I’m so please WordPress worked with me in coming up with a solution until they get the problem fixed.

  5. Hi, Hugh – I must confess that I still use the Classic Editor. I know, I know, you can lead a horse to water but…..
    I greatly appreciate the clear and helpful step-by-step blogging tips that you offer and will save this for when I make the big move.
    Wishing you a wonderful holiday ahead. See you in 2020!

  6. I’ve been lazy so far and have been using the easy way out with my photos and galleries in Gutenberg, by using the classic editor. I’m still very appreciative of you for suggesting this to me in the beginning of the year when I was struggling with photos in Gutenberg, Hugh! With your new tip, I’ll try a single photo in the new editor next time I want to post a photo by itself in my blog. Thanks!

    1. I hope it works for you, Liesbet. So far, it’s worked for most of the bloggers who contacted me and asked for help. Of course, Gutenberg is still a work-in-progress, so hopefully, WordPress will sort out these bugs.

  7. Thanks Hugh – it’s a little disappointing that you have to change the default behavior of “center-aligned” to be center-aligned, but I realize Guttenberg is a work in progress and I appreciate your sharing the results of your effort.

  8. I do encounter the ‘problem’ of the text being aligned to the left under my picures. But I also don’t have the premium plan or upgrade. WP said I couldn’t use the CSS Customizing.
    But in general I would like to thank you for your interesting posts, I’ve learned of lot from them.

    1. Yes, I believe it may be theme-related, Jonno, although WordPress said the theme I am using is ‘Gutenberg Friendly.’ For now, adding that code to the CSS is a quick fix. Hopefully, they’ll fix the problem with captions not centring under images.

Leave a Reply

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

WordPress.com Logo

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

Google photo

You are commenting using your Google 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.