How To Fix WordPress Images That Won’t Align Properly

WordPress provides built-in functionality to align images left, right, and center, but it relies on your theme to render those images properly.

If you find that your images are not aligning correctly in your theme, you can solve this by adding a few lines of CSS to your theme’s stylesheet (preferably using a child theme), or to the Additional CSS section of the Customizer:

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}

Once you’ve added this, you should find that your images begin aligning as intended.

If you have any questions, feel free to leave them in the comments below!

Brad Merrill

Brad Merrill is the CEO of Merrill Media and Editor in Chief of GigaPress.

Next How To Fix WordPress Mobile Image Alignment & Text Wrap Problems »

Previous « How To Set Up Cloudflare Flexible SSL With WordPress

View Comments

Live Action Hero says:

at

It doesn't work... Images from Flickr stay alined left...
- Brad Merrill says:
  
  at
  
  This code is for images that have been added directly through the WordPress editor, using the default aligncenter, alignleft, and alignright CSS classes. You may be able to tweak this for your use case. What method are you using to embed your Flickr images?
  - Live Action Hero says:
    
    at
    
    I simply embed images in the blog with WP blocks (Flickr or Image). But if you do it straight away, it doesn't work: images stay aligned left. Always.
    I managed to solve the issue in this way: you need to copy and paste in the embedding box only the TRUE link of the originally upped image. NOT THE SHORT LINK PROVIDED BY FLICKR IN THE SHARE COMMAND BOX (or the link in the browser). It is usually an image with an alphanumerical name that replaced the original name of your image. You get it from the BBEdit code box of Flickr. Sometimes it is tricky to insulate it for copy/paste in the box itself. You have an easier life copying the entire code in a text-editor and recopying only the link from there. That works without problems, and you can align it with WP commands at your discretion.