WordPress Images Always Align Left: Gutenberg, Theme CSS, and Quick Fixes

Have you ever added an image to your WordPress post or page using the Gutenberg editor, only to find it stubbornly aligned to the left—no matter what option you choose? You’re not alone. Many WordPress users experience the frustrating issue of images not adhering to their assigned alignment settings. Whether you’re choosing “center,” “right,” or “none,” your image may still render awkwardly aligned to the left.

This misalignment can break the flow of your content and compromise the aesthetic of your site. So why does this happen? The culprit is usually a combination of Gutenberg block behaviors and poorly configured or outdated theme CSS (Cascading Style Sheets). In this article, we’ll explain why this issue occurs, how to diagnose it, and offer some quick fixes to get your images displaying just the way you want.

Understanding Image Alignment in Gutenberg

The Gutenberg editor, introduced in WordPress 5.0, revolutionized content creation by introducing a block-based editing environment. It allows users to place and format content—like text, images, videos, and buttons—in individual blocks. While powerful, it also introduced new challenges, particularly with theme compatibility.

When you add an Image Block in Gutenberg and use the toolbar to set alignment, WordPress usually adds a class like alignleft, aligncenter, or alignright to that block. These classes are used in conjunction with your theme’s CSS to determine how the image appears on the page.

However, if your theme does not support or improperly styles these alignment classes, the browser will default to aligning the image to the left—completely ignoring your chosen alignment.

Common Reasons for Left-Aligned Images

There are several potential reasons why your WordPress images may always align left. Here are the most frequent ones:

  • Outdated or custom theme: Some themes, especially older ones, don’t fully support the Gutenberg block classes.
  • Missing CSS for alignment classes: If the classes .aligncenter or .alignright are not styled in your theme’s stylesheet, they won’t have any visual impact.
  • Conflicts with plugins: Page builders or optimization plugins may override or disable alignment styles.
  • Global style resets: Some themes use CSS resets that override WordPress default styles, including block alignments.

How to Check If Your Theme is the Problem

Here’s a simple test to see if your theme’s CSS is the issue:

  1. Create a new post or page.
  2. Add an image using the Image Block.
  3. Apply a center or right alignment.
  4. Preview the page.
  5. Use your browser’s developer tools (right-click > Inspect) to examine the image element and verify that it has an alignment class like .aligncenter.

If that class exists but the image is still left-aligned, your theme is likely missing the corresponding CSS.

Quick Fixes to Realign Your Images

Thankfully, there are several workarounds you can use to regain control over image alignment:

1. Add Custom CSS to Fix Alignment

You can manually add CSS rules for the alignment classes that must be supported. Go to Appearance > Customize > Additional CSS and paste the following snippet:


.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.alignright {
    float: right;
    margin-left: 20px;
}
.alignleft {
    float: left;
    margin-right: 20px;
}

This ensures that your theme supports basic image alignment for Gutenberg blocks.

2. Use the “Group” Block in Gutenberg

If you want more flexible layout handling, you can place your image inside a Group, Column, or Cover block. These container blocks give you more control over spacing and alignment through block settings and layout options.

Here’s how to center an image using the Group block:

  1. Add a Group block to your post.
  2. Insert your image inside that Group block.
  3. From the Group block settings in the right sidebar, choose “Align center.”

This method works even if your theme doesn’t style the Gutenberg alignment classes.

3. Customize Your Theme (Advanced)

If you’re comfortable editing theme files, consider modifying your theme’s style.css or child theme to support Gutenberg more comprehensively. WordPress offers theme support declarations that help themes integrate more effectively with Gutenberg’s block editor.

In your theme’s functions.php file, add the following to declare support for block styles:


function mytheme_setup() {
    add_theme_support( 'wp-block-styles' );
    add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

This ensures your theme understands the built-in styles Gutenberg uses, helping improve alignment and layout consistency.

Bonus Tips: Plugins and Helpers

If you prefer not to touch code, here are a few plugins that can help:

  • Simple Custom CSS and JS – Easily add custom CSS without altering theme files.
  • Block Visibility Manager – Adjust block appearance and behavior to enhance layout flexibility.
  • Editor Plus – This plugin extends Gutenberg’s capabilities and includes alignment settings and advanced styling options.

These plugins cater to both beginners and developers, offering GUI-based solutions for fine-tuning your content layout.

Testing After Applying Fixes

Once you’ve applied one of the above fixes, it’s essential to confirm everything is working:

  • Revisit a post or page with images.
  • Clear your site and browser cache, especially if you use a caching plugin.
  • Resize your browser to see how the alignment holds on different screen sizes.
  • Test on both desktop and mobile to ensure responsiveness and alignment consistency.

Should You Switch Themes?

If all else fails, and your current theme refuses to play nice with Gutenberg alignment settings, it may be time to consider a change. Look for themes advertised as “Gutenberg-ready” or “Full Site Editing (FSE)” compatible.

Some excellent Gutenberg-friendly themes include:

  • Astra
  • GeneratePress
  • Neve
  • Twenty Twenty-Three (default WP theme)

These themes are actively maintained and optimized for optimal block compatibility and layout control.

Conclusion: Take Back Control of Your Images

Image alignment issues can be an annoying roadblock in your content creation workflow, especially when you’ve done everything right inside the Gutenberg editor. The root of the problem usually lies in a lack of CSS support in your chosen theme—not in Gutenberg itself.

To summarize, here’s how you can fix image alignment issues on your WordPress site:

  • Ensure that your theme supports Gutenberg alignment classes.
  • Add or update CSS rules manually via the Customizer.
  • Utilize container blocks like Group or Columns for extra control.
  • Use plugins if you want easier access to customization tools.
  • Consider switching to a Gutenberg-friendly theme if needed.

With just a few adjustments, you can bring your images back into alignment—literally and figuratively—giving your content the polished look it deserves.

Leave a Reply