It’s a pretty common problem faced by many WordPress users, when you install a particular WordPress theme and you find out that the Image captions in your blog posts are not center-aligned. Instead they are usually aligned on the left.
But worry not. In this quick guide we are going to demonstrate how to center align your image captions. If you’re a WordPress newbie, don’t worry. It’s still very easy to do if you don’t know the technicalities behind WordPress.
Why are Image Captions aligned on the Left side?
It’s not a WordPress problem really. It’s how a particular WordPress theme has been developed. Some developers choose to set the default alignment for image captions to the left. It’s only a matter of choice.
Most publishers like to have the captions aligned centrally. It looks more natural this way and doesn’t confuse the reader. Titles and headings should definitely go to the left for improving readability, but not the captions.
Steps on How to Align Captions Centrally:
Follow the steps below to align your WordPress image captions at the center:
- First we need to identify the CSS element or class that is responsible for the alignment of the image caption. To do that, simply open Chrome browser, right-click on the caption and click on Inspect.
- As soon as you click the Inspect option, Chrome Developers Tool Tab will open and there you will be able to see the element tag name and CSS properties associated with it.
- You can now see that the HTML Tag for this element is called figcaption and the CSS class associated with it is .wp-block-image figcaption.
- Now you can change this class in your WordPress Theme’s Customize option and add your desired properties to this CSS class.
- Now click on the Additional CSS option and enter the following CSS properties like show below and click on Publish.
And that’s it! Your Image captions will now center-align automatically whenever you post an image.
Of course there’s a bit of HTML and CSS knowledge that you need to have to understand what really happened. But for now, you can just enjoy the fact that you did it yourself.
If you want to learn how HTML and CSS works, w3schools is a great resource for beginners. These are very easy-to-learn and handy skills. Once you master them, you can design and manipulate your web pages however you want.
This has driven me crazy for the longest time. I’ve tried several suggestions, none of which worked but then I found yours and my problem was solved ?Thank you so much for posting this article with such easy to follow steps!
You are amazing, thank you so much! Like the above poster, this had been bothering me for YEARS! Took 30 seconds to solve with your easy steps. Thank you again!
You’re welcome 🙂
So many dead-ends and finally a solution! Thanks so much for this.. the precise coding appearance and how to add it via ‘Additional CSS’ was the clincher! Solved my problem with this in the Edin Theme.
Glad to know it worked out for you.
Thanks… big big help
I have just applied that method, and I am surprised. Wow! it works. Thank you so much for helping by sharing this valuable post and additional css. Thank you So much.