How to Align Images in Your WordPress.Org Blog

Adding images to your WordPress blog is pretty easy with the WordPress image uploader. And after you load them, WordPress lets you align them so they look just the way you want them to look.

To add an image, click the Upload an Image icon on the Add New Post page.

The Add an Image window lets you choose images from your hard drive or from a location on the Web.

After you upload your image, you can set the alignment for your image as None, Left, Center, or Right. The WordPress theme you’re using, however, may not have these alignment styles accounted for in its stylesheet. If you set the alignment to Left, for example, but the image on your blog doesn’t appear to be aligned at all, you may need to add a few styles to your theme’s stylesheet.

WordPress.com users do not have access to template files and are not able to adjust the stylesheet to add special styling for image alignment, by default. The steps below apply to the self-hosted WordPress.Org software only; however, if you have purchased the CSS Upgrade for WordPress.com, you can add the CSS stylings mentioned below by clicking the “Edit CSS” link in the Appearances menu of your WordPress.com Dashboard.

For purposes of making sure that you have the correct image alignment for your newly uploaded images, however, here is a quick-and-dirty method:

Click the Editor link in the Appearance menu.

Edit themes to change alignment.

The Edit Themes page opens. All the template files for your active theme are listed on the right side of the page.
Click the Stylesheet template.

The Stylesheet template opens in the text box on the left side of the page.

Add your desired styles to the stylesheet.

The following table shows the styles you can add to your stylesheet to make sure that image-alignment styling is present and accounted for in your theme.

Image Alignment	Add This to Your Stylesheet
None	img.alignnone {float:none; margin: 5px 05px 0;}
Left	img.alignleft {float:left; margin: 5px10px 5px 0px;}
Center	img.aligncenter {display:block; float:none; margin: 5px auto;}
Right	img.alignright {float:right; margin: 5px 05px 10px;}