How To Center A Featured Image In WordPress

Table of Contents

Depending on how you’ve built your WordPress website, it may not be immediately obvious how to center a featured image in WordPress, and believe it or not, the method will be different depending on the tools you’ve used to create your website so far.

Luckily for you, I’m here to cover off a few different ways you can center a featured image in WordPress so we’re bound to find the right solution for you!

Before we get to the solutions, I just want to run through a few things with you to ensure we get off on the right track!

What is a featured image in WordPress?

In WordPress, a featured image is not the same as other images you’ve placed on your page. The featured image is “special” in comparison to these and can be used dynamically around your website anywhere that you insert a snippet of your WordPress post.

For example, the featured image will be the image shown alongside your blog post in your main blog archive, like so:

How to center a featured image in WordPress

The 3 images shown above my blog post titles in this screenshot are the featured images associated with the posts.

How to assign a featured image in WordPress

To assign a featured image in WordPress, you’ll need to be in the Add or Edit Post screen.

Classic Editor

If you are using the Classic Editor, you’ll scroll down to the bottom of the screen and look for this section on the right-hand side:

How to center a featured image in WordPress

From here, you click “Set featured image” and select the image you want to use.

Gutenberg Editor

If you’re using Gutenberg then you’ll follow a slightly different approach to the WordPress Classic Editor.

You’ll first click on the settings icon (highlighted in black below) and from there you’ll click “Set featured image” to select the featured image you want to use.

How to center a featured image in WordPress

Now that we’ve covered the basics, let’s get to the good stuff!

How To Center A Featured Image In WordPress

Below I will show you multiple options depending on if you are using a page builder plugin or not.

How To Center a Featured Image In Elementor Pro

If you’re using a page builder plugin then you should be able to edit your featured image position from within your blog post template. For the sake of this blog post, we’re going to show how to do this with Elementor Pro however you will follow a similar approach with all the popular page builder plugins.

Estimated time: 5 minutes

Step 1: Edit Your Single Post Template

How to center a featured image in Elementor

From your WordPress Dashboard, go to Templates > Theme Builder and then select Single Post. You should see something that looks like this.

Step 2: Insert or select the featured image widget

How to center a featured image in Elementor

Once you’ve selected your blog post template, you’ll need to either insert a featured image widget or select one if you’ve already placed it within your page template. Here’s the widget you’re looking for if you haven’t inserted it yet.

Step 3: Check the default settings

How to center a featured image in Elementor

By default, Elementor should place your featured image on the page centered, like so.

Step 4: If needed, change the default settings

How to center a featured image in Elementor

If for any reason your featured image isn’t displaying in the center then all you need to do is adjust your widget settings on the left-hand side using the alignment settings.

And you’re done! Easy. As. Pie.

Psst! If you’re keen to learn more about what you can do with Elementor Pro then I recommend checking out The WordPress Hive!

But what about if you’re not using a page builder?

Don’t worry, I’ve got you covered!

How To Center a Featured Image In WordPress Without A Plugin

To be fair, you can use this method with a page builder plugin too but it depends on how comfortable you are with code.

First of all, make sure you have a child theme activated on your website or that you’re using a custom code plugin, otherwise whenever your theme updates you’ll lose this styling.

If you’re using a custom code plugin, you’ll want to apply the following code under CSS changes.

If you’ve gone down the child theme route, you’ll need to paste this code into your style.css file.



.featured-image {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

.featured-image img {
display: inline-block !important;
}

If you’ve gone down the child theme route, you’ll need to paste this code into your style.css file.

And that’s it! Now you know how to center a featured image in WordPress!

Elementor Basics Lesson from The Wordpress Hive

Grab Your Free Elementor Tutorial Here!

If you’re looking for a FREE crash course on Elementor then this is exactly what you need to hit the ground running.

Share This Post

Pinterest
Facebook
WhatsApp
LinkedIn