WordPress Classic Editor 'Align Center' not centering images? Fix it with CSS

If the WordPress Classic Editor's 'Align Center' button isn't centering images as expected, here's a CSS snippet that will solve the problem.

Classic Editor images not centering

So you've got a self-hosted WordPress blog and you're using the Classic Editor. You create a post or page, insert an image, and decide to center it (or 'centre' it if you're a Brit like me!) using the 'Align Center' button in the post editor. The image looks centered in the editor... but when you publish the post, it's still left aligned. What's that about?

The 'Align Center' button within WordPress's so-called 'Kitchen Sink'

When you center an image in WordPress like this, it's given a CSS class of aligncenter. In the editor's 'Text' (ie code) view it will look something like this:

<img class="aligncenter size-full wp-image-2468" src="https://www.technicallyproduct.co.uk/wp-content/uploads/2023/07/cup-border.webp" alt="" width="353" height="228" />

However it's up to your theme, or more specifically your theme's stylesheet, to say what that class actually does. If your WordPress site is not playing ball, it may be that your theme is missing the bit of code that does that.

Code snippet to fix Align Center

The good news is, it's easily fixed. You will need to add the snippet below to your theme's CSS (there's a copy button at the top of the code block):

Adding the CSS to your site

If you know what you're doing, you could add the code directly to your theme's stylesheet (style.css). But there's an easier - and less risky - way: using the Theme Customizer.

1. In the WordPress dashboard, go to Appearance > Customize
2. Click on Additional CSS
3. Paste the code snippet into the additional css box
4. Click the blue Publish button at the top

Et voila! You may have to hard refresh your browser (press the Ctr and F5 keys together) before you see the change take effect on your live site.

What about the Block Editor?

Since I originally wrote this post in 2018, WordPress has made the Block Editor the new default editor for WordPress posts rather than the Classic Editor. Although it is still possible to use the Classic Editor by installing a plugin, most WordPress users will now be using the Block Editor.

So does the above fix work for the Block Editor? Well, no, because while the Block Editor does use the same CSS class of aligncenter, it applies it to a <figure> element rather than an <img>. For example:

<figure class="wp-block-image aligncenter size-full"><img class="wp-image-2468" src="https://www.technicallyproduct.co.uk/wp-content/uploads/2023/07/cup-border.webp" alt="" /></figure>

You could change the first line of my CSS snippet from img.aligncenter to figure.aligncenter, but I haven't tried this myself (as I don't use the Block Editor).