How To Center An Image In WordPress

You clicked the center alignment button. The image stayed left. Welcome to one of the most common formatting annoyances in WordPress.

Learning how to center an image in WordPress takes ten seconds when the theme cooperates. When it does not, the answer sits in the aligncenter class, a CSS rule, or your page builder’s own alignment control.

This guide covers every editing surface WordPress runs on:

• Block editor, Classic Editor, and inline images inside paragraphs
• Featured images, gallery blocks, widgets, and sidebars
• Elementor, Divi, and mobile breakpoints
• Why centering fails, with the exact fix for each cause

Pick the method that matches your setup. Then stop guessing.

What Is Image Centering in WordPress?

Image centering in WordPress is the horizontal alignment of an image block or img element to the middle of its containing element. WordPress applies it through the aligncenter class, the block editor align attribute, or a rule inside the active theme stylesheet.

Alignment lives in three separate layers. Break any one of them and the image slides back to the left.

Centering the image is not the same as centering the caption. Caption text inherits from .wp-caption-text or figcaption, which many themes style separately.

The frustrating case: an image carries the correct class and still sits left.

Three things cause that. The container is narrower than the image, the image is still display: inline, or the theme overrides the core rule with something more specific.

Web Almanac 2025 data shows a median home page loads 19 images against 13 on an inner page. Alignment is a decision you repeat dozens of times per page, so getting the mechanism right once saves real time later.

How Do You Center an Image in the WordPress Block Editor?

Select the image block, open the block toolbar, click the alignment icon, and choose Align center. WordPress writes <figure class="wp-block-image aligncenter"> into the post content and the image centers on the front end immediately.

Automata Labs research puts block editor usage at roughly 60% of all WordPress users in 2025, up from 37% in 2020. For most sites, this toolbar is the whole answer.

The alignment icon holds four states, and they behave differently:

• None: image sits at the left edge of the content column, no class added
• Align center: adds aligncenter, image stays inside the content width
• Wide width: adds alignwide, image breaks past the content column
• Full width: adds alignfull, image spans the viewport edge to edge

Wide and full only work when the theme declares support. Twenty Twenty-Four does. Plenty of older classic themes do not, and the image just renders at normal width.

How Do You Center an Image Block Inside a Group or Column?

The parent block wins here. An image inside a Group or Column takes its horizontal position from the parent layout controls, not from its own alignment toolbar.

Select the Group, open Settings, and set Justification to center. WordPress 6.x writes this into the block’s layout attribute, which compiles to justify-content: center on the front end.

Set the image itself to Align center as well when the parent is a Column with a fixed width.

How Do You Center Multiple Images in a Gallery Block?

Gallery alignment and image alignment are two different controls.

Gallery level: the toolbar alignment moves the whole wp-block-gallery container.

Image level: individual images inside a gallery ignore their own align setting, since the gallery grid positions them.

A four-column gallery holding seven images leaves three in the last row. Core CSS centers that last row by default in current WordPress versions, though a handful of themes override it with justify-content: flex-start.

How Do You Center an Image in the Classic Editor?

Click the image in the Visual tab and pick the center icon from the popup toolbar. TinyMCE writes <img class="aligncenter size-large wp-image-123"> directly into the post, with no figure wrapper unless a caption exists.

The Classic Editor plugin still reports 9 million active installations on WordPress.org, so this path is far from dead.

Three ways to reach the same setting:

• The popup toolbar that appears when the image is selected
• The pencil icon, which opens Image Details with an Align dropdown
• Advanced Options inside the media modal at insert time

The Text tab accepts a manual class if the toolbar is fighting you. Add class="aligncenter" to the img tag and switch back.

Worth knowing: the Classic block inside Gutenberg behaves identically, since it runs the same TinyMCE instance that handles indentation and other legacy formatting.

What Does the aligncenter Class Do in WordPress?

The aligncenter class applies display: block plus margin-left: auto and margin-right: auto. Those three declarations do all the work. WordPress core adds the class name, and the theme or the block library stylesheet supplies the rule.

Core does not enforce it. That distinction explains most centering failures.

The float classes are what people reach for when they want paragraph text flowing around the picture, which is a separate layout problem with separate quirks.

Where the rule actually lives depends on your setup:

• Classic themes: style.css, usually near the bottom under a WordPress core styles comment
• Block themes: wp-includes/css/dist/block-library/style.css plus theme.json layout settings
• Some commercial themes: a separate wp-core.css or legacy.css file

WPZOOM counts nearly 14,000 free themes in the WordPress.org directory as of July 2026. With that much variation, assuming every theme ships the rule is a bad bet.

How Do You Center an Image With CSS in WordPress?

Four CSS methods center an image reliably: auto margins on the image, text-align: center on the parent, flexbox on the wrapper, or grid on the wrapper. Add the rule under Appearance, Customize, Additional CSS, or in a child theme stylesheet.

“ / Method A: auto margins / .entry-content img { display: block; margin: 0 auto; }

/ Method B: parent text alignment / .entry-content .image-wrap { text-align: center; }

/ Method C: flexbox / .entry-content figure { display: flex; justify-content: center; }

/ Method D: grid, horizontal and vertical / .hero-box { display: grid; place-items: center; } `

Method B works because img is an inline element by default, so it responds to text alignment the same way a word does.

HTTP Archive data put flexbox on 74% of pages against 12% for grid, and the State of CSS 2024 survey found 78% of developers now use grid regularly. Both are safe. Neither needs a fallback in 2026.

When a page builder or a stubborn theme keeps winning, check the weight of your selector against theirs with a specificity score comparison before reaching for !important.

Which CSS Method Fits Which Situation?

Single image, one post: skip CSS entirely and use the block toolbar.

Every image site-wide: Method A in Additional CSS, targeted at .entry-content img.

Template output like archives or featured images: Method C, since the wrapper is generated by PHP and you cannot add classes per post.

Hero areas needing vertical centering too: Method D, because place-items handles both axes in one declaration.

How Do You Center an Image Inside a Paragraph or Text Block?

Inline images pasted into a Paragraph block carry no alignment attribute. Set the paragraph’s own text alignment to center, and the inline image centers with the surrounding text because it is treated as a character in the line.

GutenStats data from WordPress.com and Jetpack sites shows roughly one image block for every four paragraph blocks, so inline images are the minority case. They still show up constantly.

Common situations where an image ends up inline:

• Emoji-sized icons dropped mid-sentence
• Small vector logos inserted through the inline image button
• Content pasted from Google Docs or Word

The paragraph alignment control is the same one that handles justified text and other alignment states. Centering the paragraph centers everything in it.

Convert the image to a proper Image block when it sits on its own line. Select the paragraph, open the three-dot menu, and use Transform. You get the full alignment toolbar, alt text field, and caption support back.

How Do You Center a Linked or Clickable Image?

Wrap the image in an anchor and margin: auto stops working. The a element is inline, so it collapses to the image width but stays at the left edge. Set display: block on the anchor, or center the parent container instead.

` .entry-content a:has(img) { display: block; text-align: center; } `

Block editor behavior differs. When you add a link through the image block toolbar, WordPress applies the anchor inside the figure, and the aligncenter class stays on the figure. Centering survives.

Hand-written HTML in a Custom HTML block is where this breaks, since nothing wraps the anchor.

Two fixes, ranked by how much they survive a theme update:

• Preferred: put the anchor inside a figure or div and center the parent

• Quick: add style=”display:block;margin:0 auto” to the anchor itself

WordPress 6.4 shipped a native lightbox through the Expand on click toggle in the Image block settings panel. That option and a manual link are mutually exclusive, since both claim the click.

Enable the lightbox site-wide in theme.json under settings.blocks.core/image.lightbox.enabled. Alignment is unaffected either way, because the overlay renders outside the figure.

How Do You Center a Featured Image in WordPress?

Featured images render from template code, not from post content, so the block toolbar has no effect on them. Center a featured image through the Post Featured Image block’s parent justification in a block theme, or with a CSS rule targeting .wp-post-image in a classic theme.

Block themes: open the Site Editor, edit the Single template, select the Group wrapping the Post Featured Image block, and set Justification to center.

Classic themes: the image comes from thepostthumbnail() inside single.php or content.php, so CSS is the only lever without touching PHP.

` .post-thumbnail { text-align: center; } .wp-post-image { display: block; margin: 0 auto; } `

Theme wrappers vary more than people expect. Astra reports over 1 million active installations on WordPress.org, GeneratePress around 500,000, and each one nests the thumbnail in a different container class.

Inspect the markup before writing the selector. Guessing at .entry-thumb when the theme uses .ast-single-post-featured wastes an afternoon.

Copy any template file into a child theme first. Editing parent theme files directly means the next update erases your work, which is exactly the situation covered in guidance on when core and theme files are safe to modify.

Some layouts look better with no thumbnail at all above the content, and suppressing the featured image on single posts is a cleaner fix than fighting its alignment.

How Do You Center an Image in a Widget or Sidebar?

Block-based widgets accept the standard alignment toolbar. Legacy widgets do not, so a Custom HTML widget needs class=”aligncenter” or an inline style added by hand.

WordPress 5.8 replaced the old widget screen with block widgets in July 2021. Sites running the Classic Widgets plugin still see the pre-2021 interface.

What works where:

• Block widget area: insert an Image block, use the alignment icon, done
• Custom HTML widget: markup passes through untouched, so your class survives
• Text widget (legacy): WordPress strips some attributes on save, so classes beat inline styles here

Footer widget areas cause the most trouble.

Most modern themes wrap footer columns in a flex container, and margin: auto behaves differently inside a flex parent than inside a block one. Target the widget container with justify-content: center instead of fighting the image.

Widget areas are registered through register_sidebar() in the theme, which is worth knowing if you ever need to adjust the functions file that defines them.

How Do You Center an Image in Elementor, Divi, and Other Page Builders?

Page builders ignore the WordPress alignment system entirely. Each one ships its own alignment control inside the image widget, and the builder’s generated CSS overrides aligncenter through higher specificity and scoped selectors.

HTTP Archive crawl data analyzed by GravityKit detects Elementor on 32.67% of WordPress sites as of April 2026, with WPBakery at 8.52% and Divi at 5.7%. Builder-specific controls apply to a large slice of the ecosystem.

Why your custom CSS keeps losing: Elementor writes inline styles and generates selectors like .elementor-element-a1b2c3 .elementor-widget-container. That beats .aligncenter every time.

Use the builder’s own control first. Reach for CSS only when the control does not exist, and match the builder’s selector depth when you do.

The per-device toggles are the real advantage here, since they handle layout that adapts across screen sizes without writing a single query by hand.

How Do You Center an Image on Mobile Screens?

Desktop centering breaks on mobile when float-based alignment collapses or the container drops below the image width. Force centering below 768px with a media query, or use the per-device alignment control in your page builder.

StatCounter data puts mobile above 59% of global web traffic in 2026, with desktop near 38%. The narrow view is the default view for most visitors.

` @media (max-width: 768px) { .entry-content img, .entry-content .alignleft, .entry-content .alignright { float: none; display: block; margin: 0 auto; } } `

The float reset matters. An image floated left at 300px inside a 340px viewport leaves a useless 40px column of orphaned text beside it.

Pair the rule with max-width: 100% and height: auto so the image scales before the auto margins have anything to distribute.

Breakpoint targeting is standard conditional CSS syntax, and the breakpoint value depends on where your theme’s content column actually collapses, not on a number you read somewhere.

Test in Chrome DevTools with the device toolbar open, then check the editor’s own preview dropdown. Both matter, because the block editor renders a simulated display area that does not always match the front end.

Why Is Your Image Not Centering in WordPress?

Six causes account for nearly every failed centering attempt: a missing theme rule, a container narrower than the image, an inline anchor wrapper, cached CSS, page builder specificity, or a leftover float declaration.

Caching is the sneaky one. LiteSpeed Cache reports 7 million active installations and W3 Total Cache over 1 million, so odds are good something is serving your visitors an older stylesheet.

Purge the cache, then reload with the network cache disabled in DevTools before you conclude the CSS is wrong.

CSS minification and file combining break things in a second way. Some plugins reorder rules during concatenation, which changes which declaration wins.

The inspection workflow that actually finds it:

• Right-click the image, choose Inspect
• Read the Computed tab for display, margin-left, and float

• Look for struck-through declarations in Styles, which show what overrode what
• Check the parent element’s width against the image width

A completely absent image is a different problem with different causes, covered in troubleshooting for pictures that fail to render at all.

Which Image Centering Method Fits Your Setup?

Block editor alignment handles single posts on any modern theme. Additional CSS handles site-wide consistency. Child theme CSS suits developer-maintained projects, and builder controls win whenever a page builder owns the layout.

Recommended order: try the editor control, then the builder control, then Additional CSS, then the child theme.

The one approach to avoid: inline style attributes typed directly into post content.

Inline styles scatter presentation across hundreds of database rows. Migrate the site, switch themes, or run a search-and-replace, and you inherit a cleanup job that no stylesheet edit can undo in one pass.

Editorial teams gain the most from the site-wide route. Set .entry-content img once in Additional CSS and writers stop making per-post alignment decisions entirely.

FAQ on How To Center An Image In WordPress

Why is my image not centering even with the aligncenter class?

The theme stylesheet lacks the rule or overrides it. Core adds the class name, the theme supplies margin: 0 auto. Add the declaration in Additional CSS, or check whether a float is still applied.

How do I center an image without touching CSS?

Use the alignment icon in the block toolbar. Select the image block, click the icon, choose Align center. WordPress writes the class for you and the change appears immediately on the front end.

Can I center an image and its caption together?

Yes. Centering the figure element moves both, since the caption sits inside it. Some themes style figcaption separately, so add text-align: center to the caption selector when the text stays left.

How do I center an image inside a Custom HTML block?

Nothing wraps your markup there, so add the class yourself. Write class=”aligncenter” on the img tag, or wrap the image in a div and apply text-align: center to it.

Does centering an image affect page speed or SEO?

No. Alignment is presentation only, handled by CSS margins that cost nothing at render time. Image file size, dimensions, and lazy loading affect Core Web Vitals. Alignment does not.

How do I center an image vertically in WordPress?

Use grid on the wrapper: display: grid plus place-items: center handles both axes in one declaration. The parent needs a defined height, otherwise there is no vertical space to distribute.

Why does my image center in the editor but not on the front end?

The editor loads its own stylesheet. Your theme’s front-end CSS differs, or a caching plugin is serving an older file. Purge the cache first, then compare computed styles in DevTools.

How do I center a logo image in the WordPress header?

Header logos come from the Customizer or a template, not post content. Astra, GeneratePress, and Kadence ship a header layout setting with a centered option. Block themes use the Site Logo block’s parent justification.

Can I center every image on the site at once?

Add one rule to Appearance, Customize, Additional CSS targeting .entry-content img with display: block and auto margins. Every post and page inherits it, and writers stop making per-image alignment decisions.

Does the aligncenter class still work in block themes?

Yes. Block themes load the class through the block library stylesheet rather than style.css. Layout controls in theme.json handle the parent containers, but aligncenter on the figure behaves the same way.

Conclusion

Knowing how to center an image in WordPress comes down to identifying which layer owns the alignment: the block attribute, the class in your saved markup, or the theme stylesheet rule.

Fix the layer that is actually broken. Stacking a CSS override on top of a toolbar setting that already works creates a mess for whoever maintains the site next.

Two habits save the most time:

• Read the computed display and margin` values in DevTools before writing any rule
• Purge the cache before concluding that a fix failed

Set the site-wide rule once in Additional CSS, then let the block toolbar handle the exceptions.

Alignment stops being a per-post decision after that. It turns into a setting you configured once, which is exactly where it belongs.