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.

Author: Hugh W. Roberts

My name is Hugh. I live in the city of Swansea, South Wales, in the United Kingdom. My blog covers a wide range of subjects, the most popular of which are my blogging tips posts. If you have any questions about blogging or anything else, please contact me by clicking on the 'Contact Hugh' button on the menu bar. Click on the 'Meet Hugh' button on the menu bar of my blog to learn more about me and my blog.

76 thoughts

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

Leave a Reply to Dave Cancel reply

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

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