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.
Copyright © 2019 hughsviewsandnews.com – All rights reserved.
I’m not sure why, Hugh… but I can’t this code to work for me. I’ll keep messing with it. Thanks so much for all your hard work. ❤
I found that just an extra dot or space can make it not work, Colleen. It took me about three attempts to get it to work. If it still doesn’t work, it could be themed related. A call to the Happiness engineers should solve the problem.
Will do, Hugh. I’ll try again and see. Thanks as always for your help. ❤️
You have become a real WordPress pro! I was a little frustrated by this problem but never bothered to look into it. Thank you! And impressive if you wrote this code!
Oh, I didn’t write the code, Aixa. It was one of the happiness engineers at WordPress that put it all together. I did my bit to help, though.
I love these happiness engineers! They’re the best part of WordPress.com!
I agree. They’ve always been very helpful whenever I’ve had to contact them.
Hi Hugh,
As always, your blogging tips are spot on, especially when it comes to using Gutenberg, something so many bloggers still struggle with. The time is running out for bloggers to switch to Gutenberg from Classic. I’m sure when that occurs, your Gutenberg tips will be even more helpful.
Janice
I do hope so, Janice. This time next year, WordPress will have almost finished closing down support for the Classic editor before it finally gets the chop at the end of 2021. However, I’m sure there will be a lot of changes to the Gutenberg editor before then. All good, I hope.
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!
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.
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!
You’re welcome. With a bit more practice, I eventually went on to prefer using the Gutenberg editor. Now I use it for my posts. It does have a long learning curve, but it was well worth it.
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!
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.
You’re welcome! I appreciate your message of hope :-)!
I’m so glad it worked Hugh!! Visiting from Esme’s salon and sharing.
I’m delighted that WordPress helped me find a solution, Debbie. It was driving me nuts not having the captions under the centre of images.
We have that in common Hugh!!
Reblogged this on Writing Wrinkles and commented:
Another useful tip from Hugh’s Views and News. (Don’t you love those bloggers who save us time and angst by doing the research for us?)
Another useful tip – thanks
You’re welcome, Cathy. Thank you for reblogging the post and sharing it with your readers.
Thanks for this Hugh. Added .wp-block-image .aligncenter> figcaption { text-align: center; } to my CSS and problem sorted. Cheers
I’m glad it’s working, Lisa. Thanks for letting me know.
I just tried this for tomorrow’s SS post and it WORKS! I gave you a shout-out! Thanks, Hugh!
I’m so pleased to hear it’s worked, Terri. That’s brilliant news. Thank you for the upcoming shoutout.
Oye. I’m so glad I’m on the old editor Hugh. LOL ❤
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.
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 ❤
I gave this a go immediately Hugh as I was very excited to have the captions centred, but unfortunately it didn’t work for me!
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.
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 🙂
Good to hear it’s now worked and your captions are now aligned centre, Debbie. Thank you for letting me know.
Yes I can sleep easier at night now Hugh 😂Thanks again!
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.
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.
Reblogged this on Author Don Massenzio and commented:
Check out this very helpful post from Hugh’s Views and News blog with the topic How to Center Captions Under Blog Images On the Gutenberg Editor
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!
You’re welcome, Donna. I know I said this, but don’t leave it too late in moving over. Support for the Classic editor will gradually be withdrawn from 2020.
Reblogged this on THE BLOGGING STATION.
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!
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.
Hiya Hugh, I tried this and nothing happened. Must be me, I’m such a technophobe 😦
I had to have a few goes at it but got it to work in the end. I passed on the information to some other bloggers (before publishing this post), and it seems to have worked. I hope you can fix the problem.
Thanks Hugh, I will try again. 🙂
Very helpful. Thanks!
You’re welcome.
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.
It is, Dan, but I was thankful that WordPress guided me through the process and had a workaround. Now I can sleep, knowing that captions under my images are centred.
Thank you for the advice. Did it right away!!
You’re welcome. That’s great, Erika.
Thanks, Hugh, the step-by-step instructions are appreciated!
You’re welcome, Jacquie.
This is good to know, Hugh. I have struggled but had settled for left alignment as I didn’t know how to correct it.
Likewise, Robbie, I struggled for ages to try and find out how to align captions to the centre. This seems to be a temporary fix. Hopefully, WordPress will fix the problem soon.
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.
I’m sorry to hear that you don’t have access to the CSS panel on your blog. WordPress is aware of the alignment problem, so hopefully, they will do a fix soon.
Now this is something I hadn’t even encountered or thought of! Thanks for the guidance Hugh!
You’re welcome, Ritu. It may not be happening on the images, photos and pictures of your blog posts, but at least you now know what to do if it is.
Perfect!!!
Good tip Hugh, not had the problem so far as it’s probably theme-dependant but must affect a lot of themes.
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.