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:
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:
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.
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
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
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
By default, Elementor should place your featured image on the page centered, like so.
Step 4: If needed, change the default settings
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!