Fixing WordPress CSS Alignment Editor Issues

WordPress is finally providing a blog text editor that they can be proud of.  As of the most recent release, I have switched from using a desktop client to write blog entries to the WordPress web site interface.  That isn’t to say it hasn’t been without problems.

One issue I saw was that the text and picture alignment (left, right, and center) was not working.   However, this is a very simple thing to fix, if you aren’t afraid to get your hands dirty with some stylesheet work.

The problem is that the WordPress post and page editor uses its own CSS code to change how your page or post gets presented.  So if it is not in place already, copy this snipit of code into each of your WordPress themes to fix your alignment problems.

Here is the code you’ll want to copy and paste into your theme’s stylesheet:

img.centered, .aligncenter, div.aligncenter {display: block; margin-left: auto; margin-right: auto; }

img.alignright { padding: 4px; margin: 0 0 4px 5px; display: inline; }

img.alignleft { padding: 4px; margin: 0 5px 4px 0; display: inline; }

.alignright { float: right; }

.alignleft { float: left; }

Feel free to edit that as needed, to fit your own design preferences. Your theme is found at:

/wp-content/themes/nameoftheme/stylesheet.css

That should get you basically to the right spot.  Depending on the theme, stylesheet name might change. Also “nameofthetheme” should reflect the name of the WordPress theme you are using.

If you are having a hard time getting your images and content to align as you have specified in the built-in WordPress editor, this should do the trick.  Just remember to upload the changes, once you have put them in place.