How to center-align Image Captions in WordPress

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:

  1. 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.
    Image Caption
  2. 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.
    figcaption
  3. 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.
  4. Now you can change this class in your WordPress Theme’s Customize option and add your desired properties to this CSS class.
    Theme Customize
  5. Now click on the Additional CSS option and enter the following CSS properties like show below and click on Publish.
    Additional CSS

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.

Spread the Word

You May Also Like

About the Author: Umair

Umair specializes in System Administration (Windows, Linux), Network Security, Cyber Security and other Technology areas including Web Development Frameworks (ReactJS, NodeJS, MongoDB). He is passionate about helping people with all sorts of technical problems.

Leave a Reply

Your email address will not be published. Required fields are marked *